Python Flask框架+jquery+实现异步文件上传

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