Ajax实现文件(图片)的上传下载

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

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

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

$('#iconFile').change(function () {
    var formData=new FormData();
    formData.append("iconFile", document.getElementById("iconFile").files[0]);
    $.ajax({
        url:"${pageContext.request.contextPath}/uploadServlet",
        processData:false,      //默认为true,对请求传递的参数(formData)不做编码处理
        contentType : false,       //不对请求头做处理
        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对其进行操作。