Using jQuery ajax and FormData to upload a file

使用form表单初始化FormData对象方式上传文件

html

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button id="upload" type="button">上传</button>
</form>

javascript


$('#upload').click(function() {
    uploadSubmit();
});

function uploadSubmit() {
    var formData = new FormData($('#uploadForm')[0]);

    $.ajax({
        url: '/file/upload',
        type: 'POST',
        data: formData,
        dataType: 'json',
        cache: false,
        processData: false,
        contentType: false,
        success: function(res) {
            console.log(res);
        },
        error: function(err) {
            console.log(err);
        }
    });
}

上传后服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为input中声明的是name="file"

注意几点：

form 标签添加 enctype="multipart/form-data" 属性，用于文件上传
cache 设置为 false，上传文件不需要缓存
processData 设置为false，因为data值是FormData对象，不需要对数据做处理
contentType 设置为false，因为由 form 表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false

上传多张图片

在<input type="file">里添加multiple或multiple="multiple"属性和name="file[]"

1	<input type="file" name="file[]" multiple="multiple" />

使用FormData对象添加字段方式上传文件

html

<div id="uploadForm">
    <input id="file" type="file"/>
    <button type="button" id="upload">上传</button>
</div>

javascript


$('#upload').click(function() {
    uploadSubmit();
});

function uploadSubmit() {
    var formData = new FormData();
    formData.append('file', $('#file')[0].files[0]);

    $.ajax({
        url: '/file/upload',
        type: 'POST',
        data: formData,
        dataType: 'json',
        cache: false,
        processData: false,
        contentType: false,
        success: function(res) {
            console.log(res);
        },
        error: function(err) {
            console.log(err);
        }
    });
}

注意几点：

append()的第二个参数应是文件对象，即$('#file')[0].files[0]
contentType也要设置为false

上传多张图片

在<input type="file">里添加multiple或multiple="multiple"属性

1	<input id="file" type="file" multiple="multiple" />

javascript


$('#upload').click(function() {
    uploadSubmit();
});

function uploadSubmit() {
    var formData = new FormData();
    var files = $('#file')[0].files;
    for (var i = 0; i < files.length; i++) {
        formData.append('file[]', files[i]);
    }

    $.ajax({
        url: '/file/upload',
        type: 'POST',
        data: formData,
        dataType: 'json',
        cache: false,
        processData: false,
        contentType: false,
        success: function(res) {
            console.log(res);
        },
        error: function(err) {
            console.log(err);
        }
    });
}