ajax 实现文件上传

我们知道表单提交实现文件上传时，需要将表单的​​enctype​​​值设置为​​multipart/form-data​​

<form enctype="multipart/form-data">
    <input type="file" name="icon" id="iconFile">
</form>

但是表单提交无法做到页面无刷新，我们知道让页面无刷新请求可以使用ajax
那么我们就来说说利用ajax如何实现文件的上传

大家可以打开JQuery在线文档，查看详细参数说明：​​JQuery在线文档​​

$('#iconFile').change(function () {
    // 构建一个虚拟表单,此表单类型默认为multipart/form-data类型
    var formData=new FormData();
    // 给表单追加参数(图片)
    formData.append("iconFile", document.getElementById("iconFile").files[0]);
    // 还可以追加普通参数
    formData.append("username", 'root');
    formData.append("password", 'admin');
    $.ajax({
        url:"${pageContext.request.contextPath}/uploadServlet",
        processData:false,      //默认为true,对请求传递的参数(formData)不做编码处理
        contentType : false,    //不对请求头做处理(ajax请求默认的contentType为application/x-www-form-urlencoded)
        data:formData,
        type:"post",
        async:true,
        success:function (status) {
            if(status=='200'){
                alert("文件上传成功！");
            }else{
                alert("文件上传失败！");
            }
        },
        error:function (data) {
            alert("文件上传失败！");
        }
    });
});

processData：

类型：Boolean
默认值：true，在使用ajax发送请求时，会把data传递进来的参数转换成一个字符串。如果不希望转换为其他的信息可以设置为false。例如上面的文件上传传递的是一个iconFile的DOM树。

contentType：

post提交默认为​​"application/x-www-form-urlencoded"​​​，get方式提交默认为null，
文件上传提交方式为​​​"multipart/form-data"​​，在文件提交时，设置为false，避免JQuery对其进行操作。