HTML5 FormData实现文件上传功能

之前做文件上传功能，都是在网上找插件的（需要插件的，推荐webUpload：http://fex.baidu.com/webuploader/getting-started.html）。但如果需求中图片上传功能要求不是很复杂的时候，导入插件，就会显得累赘。前几天自己写了一下，发现实现起来还是很简单的。

html代码：

<form id="upload" enctype="multipart/form-data" method="post"> 
    <input type="file" name="file" id="file"/> 
    <input type="button" name="submit" id="submit" onclick="uploadImage()"/> 
</form> 

js代码：

function uploadImage(){
    var form = document.getElementById('upload'), 
        formData = new FormData(form);

    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        cache: false,
        processData: false,
        contentType: false
        }).success(function(res) {

        }).error(function(res) {});
    }) 
}

这里要注意几点：

• <form>标签添加enctype="multipart/form-data"属性
• jQuery 的 ajax 中processData设置为false （表示不需要对数据做处理）
• jQuery 的 ajax 中cache设置为false （表示上传文件不需要缓存）
• jQuery 的 ajax 中contentType设置为false （因为前面已经声明了是‘FormData对象’）
• 要想让<input type="file">标签 能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。

如果要修改文件名：

formData.append(name, value, filename);

如：formData.append("file", $('#file')[0].files[0], "image1.jsp");

参考地址：https://developer.mozilla.org/en-US/docs/Web/API/FormData/append