├── upload └── .gitkeep ├── .gitignore ├── static ├── css │ └── style.css └── js │ └── app.js ├── README.md ├── templates └── index.html └── app.py /upload/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | log.txt 2 | -------------------------------------------------------------------------------- /static/css/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flask File Upload with jQuery Ajax 2 | -------------------------------------------------------------------------------- /templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 |
14 |

Result Filename:  here

15 |

Result Filesize: here

16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static/js/app.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $('#submit').click(function() { 3 | event.preventDefault(); 4 | var form_data = new FormData($('#uploadform')[0]); 5 | $.ajax({ 6 | type: 'POST', 7 | url: '/uploadajax', 8 | data: form_data, 9 | contentType: false, 10 | processData: false, 11 | dataType: 'json' 12 | }).done(function(data, textStatus, jqXHR){ 13 | console.log(data); 14 | console.log(textStatus); 15 | console.log(jqXHR); 16 | console.log('Success!'); 17 | $("#resultFilename").text(data['name']); 18 | $("#resultFilesize").text(data['size']); 19 | }).fail(function(data){ 20 | alert('error!'); 21 | }); 22 | }); 23 | }); -------------------------------------------------------------------------------- /app.py: -------------------------------------------------------------------------------- 1 | from flask import ( 2 | Flask, 3 | request, 4 | render_template, 5 | send_from_directory, 6 | url_for, 7 | jsonify 8 | ) 9 | from werkzeug import secure_filename 10 | import os 11 | 12 | basedir = os.path.abspath(os.path.dirname(__file__)) 13 | 14 | app = Flask(__name__) 15 | 16 | from logging import Formatter, FileHandler 17 | handler = FileHandler(os.path.join(basedir, 'log.txt'), encoding='utf8') 18 | handler.setFormatter( 19 | Formatter("[%(asctime)s] %(levelname)-8s %(message)s", "%Y-%m-%d %H:%M:%S") 20 | ) 21 | app.logger.addHandler(handler) 22 | 23 | 24 | app.config['ALLOWED_EXTENSIONS'] = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif']) 25 | 26 | 27 | def allowed_file(filename): 28 | return '.' in filename and \ 29 | filename.rsplit('.', 1)[1] in app.config['ALLOWED_EXTENSIONS'] 30 | 31 | 32 | @app.context_processor 33 | def override_url_for(): 34 | return dict(url_for=dated_url_for) 35 | 36 | 37 | def dated_url_for(endpoint, **values): 38 | if endpoint == 'js_static': 39 | filename = values.get('filename', None) 40 | if filename: 41 | file_path = os.path.join(app.root_path, 42 | 'static/js', filename) 43 | values['q'] = int(os.stat(file_path).st_mtime) 44 | elif endpoint == 'css_static': 45 | filename = values.get('filename', None) 46 | if filename: 47 | file_path = os.path.join(app.root_path, 48 | 'static/css', filename) 49 | values['q'] = int(os.stat(file_path).st_mtime) 50 | return url_for(endpoint, **values) 51 | 52 | 53 | @app.route('/css/') 54 | def css_static(filename): 55 | return send_from_directory(app.root_path + '/static/css/', filename) 56 | 57 | 58 | @app.route('/js/') 59 | def js_static(filename): 60 | return send_from_directory(app.root_path + '/static/js/', filename) 61 | 62 | 63 | @app.route('/') 64 | def index(): 65 | return render_template('index.html') 66 | 67 | 68 | @app.route('/uploadajax', methods=['POST']) 69 | def upldfile(): 70 | if request.method == 'POST': 71 | files = request.files['file'] 72 | if files and allowed_file(files.filename): 73 | filename = secure_filename(files.filename) 74 | app.logger.info('FileName: ' + filename) 75 | updir = os.path.join(basedir, 'upload/') 76 | files.save(os.path.join(updir, filename)) 77 | file_size = os.path.getsize(os.path.join(updir, filename)) 78 | return jsonify(name=filename, size=file_size) 79 | 80 | 81 | if __name__ == '__main__': 82 | app.run(debug=True) 83 | --------------------------------------------------------------------------------