Ajax文件上传功能de实现

在进行文件上传的时候，我们往往会使用表单提交的方式：

<form action='....'>
    <input type='file' name='file' />
    <input type='submit' value='上传'>
</form>

但是给表单提交添加回调函数比较困难，所以在这一次提交时，我使用了Ajax进行提交，在其中遇见了一些问题，在这一做一下小小的分享。

刚开始我是这样写的：

var file=$('#file').files[0];
console.log(file);
$.ajax({
    type: "post",
    url: "提交地址",
    data: {
        'file':file
    },
    dataType: "text",
    success: function (data) {
         请求成功回调函数               
    },
    error: function (data) {
        请求失败执行函数
    }
});

在代码执行的时候，console.log()确实帮我打印出了这个文件，也正是我想要上传的文件，相应的信息也正确无误，但是在文件的上传过程中，网页控制台报错：

控制台报错

也就是说上传的姿势不对，后来去查了相关的资料，得出了最终的解决方案：

$('#file').change(function () {
    var file =$('#file').files[0];
    var formData = new FormData();
    formData.append('year',select);
    formData.append('file',$('#file').files[0]);
    $.ajax({
        type: "post",
        url:请求地址,
        processData:false,
        data:formData,
        contentType:false,
        mimeType:"multipart/form-data",
        dataType: "json",
        success: function (data){
            //请求成功回调函数              
        }
        error: function(data){
            //请求失败执行函数
        }
    })
});

其中的最为重要的就是：

processData:false,

contentType:false,

mimeType:"multipart/form-data",

这三个是必不可少的，也是文件上传与其他请求不一样的原因

processData:false：

默认值为true，如果你要上传文档，当然就不希望能这么发送了，必须得设置processData=false，且以POST方式发送才行。

contentType:false,

Content-Type，内容类型，用于定义网络文件的类型和网页的编码，决定文件接收方将以什么形式、什么编码读取这个文件，默认值为true。

mimeType:"multipart/form-data"

在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash ……那么，浏览器是如何区分它们，决定什么内容用什么形式来显示呢？答案是 MIME Type，也就是该资源的媒体类型。在此我们将其设置为multipart/form-data，通过post组合，实现文件的上传。