1.前端页面表单定义
<form role="form" class="form-horizontal" method="post" name="regForm" id="regForm" enctype="multipart/form-data">
<div class="form-group">
<label for="userPic">个人图像:</label>
<img src="" alt="图片" id="userImg" style="width: 75px;height: 100px;border: dashed 1px beige;" />
<input type="file" id="upload" name="upload">
<button type="button" class="btn btn-default" οnclick="ajaxUploadFile()">上传</button> <progress id="progress"></progress>
<input type="hidden" id="picPath" name="picPath">
</div>
</form>
2.文件上传AJAX代码定义
function ajaxUploadFile(){
//创建FormData对象,初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
var formData = new FormData($('#regForm')[0]); // $('#regForm')[0]
//ajax异步上传
$.ajax({
url: "/upload.do",
type: "POST",
data: formData, // 1、json对象{} 2、json String 3、formData对象
xhr: function () { //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { //检查upload属性是否存在
//绑定progress事件的回调函数 给<input type="file" name='upload' />
myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr; //xhr对象返回给jQuery使用
},
success: function (result) {
result = JSON.parse(result);
$("#userImg").attr("src", result.url); // 前端显示上传完成的图片
document.regForm.picPath.value = result.url;
// $("#result").html(result);
},
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false //必须false才会避开jQuery对 formdata 的默认处理
});
}
3.Flask后台处理文件上传和保存
@app.route('/upload.do', methods=['POST', 'GET'], strict_slashes=False)
def uploadFile():
# 后缀需要检查的
file = request.files.get('upload')
if file:
try:
file.save(os.path.dirname(__file__) + os.sep + '..' + os.sep + 'static' + os.sep + 'uploads'+ os.sep + file.filename) # 保存文件到upload目录
except Exception as e:
return json.dumps({'uploaded': 0, 'fileName': "", 'url': ""})
pass
return json.dumps({'uploaded': 1, 'fileName':file.filename, 'url': os.sep + 'static' + os.sep + 'uploads'+ os.sep + file.filename})
else:
return json.dumps({'uploaded': 0, 'fileName': "", 'url': ""})
pass