ajax+FormData實現圖片上傳

ajax+FormData實現圖片上傳

直接上代碼

• html

<input type="file" name="file" id="file">
<input type="button" value="upload" id="sub">

• js

<script>
    $(function () {
        $('#sub').click(function () {
            var file = $("#file")[0].files[0];
            console.log(file)
            var form = new FormData();
            form.append("file", file);
            $.ajax({
                url: '/upload',
                type: "POST",
                data: form,
                async: true, //異步
                processData: false, //很重要，告訴jquery不要對form進行處理
                contentType: false, //很重要，指定爲false才能形成正確的Content-Type
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        })
    })
</script>

• 後臺

python+flask

UPLOAD_FOLDER = '/data/temp/'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route("/upload", methods=['post'])
def upload():
    file = flask.request.files['file']
    file_name = werkzeug.secure_filename(file.filename)
    file_path = os.path.join(app.config['UPLOAD_FOLDER'], file_name)
    file.save(file_path)
    return 'success'
    pass