利用ajax上传表单中多个文件

在表单中，往往点击提交之后都会跳转到指定的页面，而且在上传多文件的时候会有一定的局限性。那么大家不妨可以试试jQuery提供的ajax方法来提交表单：

<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input class="fileUpload" type="file" name="uploadfile_1">
    <input class="fileUpload" type="file" name="uploadfile_2">
    <input class="fileUpload" type="file" name="uploadfile_3">
    <input type="button" value="提交" id="btnImportOK">
</form>

这里注意form的属性为enctype="multipart/form-data"

接下来我们需要引入jQuery

<script src="js/jquery-1.9.1.min.js"></script>

然后在我们的提交按钮上绑定获取数据和提交数据的操作

$("#btnImportOK").click(function () {
    var formData = new FormData($("#uploadForm")[0]); //获取表单数据

    $.ajax({
        type: "POST",
        data: formData,
        url: "/picture/authentication",
        contentType: false,
        processData: false,
        }).success(function (data) {

    })
});

那么有细心的同学发现了，在这里去输出formData会发现是个空对象。在这里是因为formData里的数据是一类似于私有属性的方式储存，必要要通过下面的方式来获取

console.log(formData.get(key)) //key为input的id

接下来就是要完善自己相应的操作了