Separate Browse button and text

---

Submit

HTML head

      
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
  $('input[type="file"]').change(function(e){
      var fileName = e.target.files[0].name;
      var filetext = document.getElementById('filetext');
      filetext.innerHTML = fileName;
  });
});
</script>
      
    

HTML body

      
<form method="POST" action="" enctype="multipart/form-data">
    <label>
    <input id="my_file" name="abc" type="file" style="display:none;"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" style="width:20%">
    </label>
    <button type="submit" name="submit_form_button" >Submit</button>
    <div id="filetext">
    </div>
</form>
      
    

Python Flask Code

      
import flask
from flask import Flask,render_template,request,url_for
from PIL import Image
import numpy as np

app = Flask(__name__)
app.config.from_object(__name__)
app.config['SECRET_KEY'] = 'LegendaryKey'

@app.route('/',methods=['GET','POST'])
def hello():
    print(request.form)
    print(request.data)
    print(request.args)
    print(request.files)
    print('Valuess---------',request.values)
    if 'submit_form_button' in list(request.form.keys()):
        i = Image.open(request.files['abc'])
        img = np.asarray(i)
        print(img.shape)
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug=True,host='localhost',port=1080)

      
    
    

    
References