200字范文 > Python flask使用ajax上传文件

Python flask使用ajax上传文件

时间：2019-03-03 20:59:47

前言

JS

为什么要用ajax来提交

在使用from提交时，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

为安全起见，即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略，并且对于此类元素来说，value属性是只读的，这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名时，file-upload 元素触发 onchange 事件句柄。

利用form提交会导致页面刷新，体验不好，所以使用AJAX进行文件上传是个不错的选择。但这需要我们自己来组织通过POST请求发送的内容

FormData对象

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。 —— MDN web docs

Form的enctype属性

enctype这个属性管理的是表单的MIME编码，它一共有三个属性：

Input

MIME类型（更多直接百度，类型超乎你的想想）

上传单个文件

html代码部分

<form id="uploadForm" method="post" enctype="multipart/form-data"><label >上传电子书</label><input type="file" name="file" ><button id="upload" type="button" name="button" >上传</button></br></br></br></form>

javascript代码部分

当你的页面样式比较多的时候，可能上述方法无法传入文件，下面这种方法比较强，推荐看看

<form class="info" method="post" enctype="multipart/form-data"><div class="form-group"><label>File upload</label><input id="id_regression_html" type="file" name="regression_html" class="file-upload-default"><div class="input-group col-xs-12"><input type="text" class="form-control file-upload-info" disabled="" placeholder="Upload Regression.html"><span class="input-group-append"><button id="html_upload" class="file-upload-browse btn btn-gradient-primary" type="button">Html Upload</button></span></div></div><button id="id_ajax_submit" type="button" class="btn btn-gradient-primary mr-2">Submit</button></form>

flask 视图函数部分

@admin_blu.route("/toolReg", methods=['GET', 'POST'])def regression_report():if request.method == "GET":return render_template('index.html')elif request.method == "POST":# TODO：获取设置# TODO：获取文件f = request.files.get('file')if f and f.filename.__contains__('.html'):upload_path = os.path.join(current_app.root_path, 'static/upload/html', f.filename) download_path = os.path.join(current_app.root_path, 'static/upload/html', 'xlsx')# TODO：类实例化，同步执行f.save(upload_path)ret = {"status": 0,"errmsg": "上传成功"}return jsonify(ret)return redirect(url_for(".index.html"))

上传多个文件

html

<form id="uploadForm" enctype="multipart/form-data"><input type="file" name="file" multiple="multiple" /></form><button id="btnUpload">上传文件</button>

js

<script>$("#btnUpload").on("click", function(){var formdata = new FormData($("#uploadForm")[0]);alert(formdata);$.ajax({type: "post",url: "/Attendance/UploadFile2/",//url地址contentType: false,cache: false,processData: false,data: formdata,success: function (data) {console.log(data);}});});</script>

出问题解决方案

//将formdata改用下面的方式试下var formdata = new FormData();var files = $("input[type='file']")[0].files;for (var i = 0; i < files.length; i++) {formdata.append("file", files[i]);}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。