input=file 通过Ajax上传

小鱼儿 2022-06-08 14:24 222阅读 0赞

### input类型设为file： ###

### 如果想上传多文件，可添加multiple ###

### 用`accept="MIME_type"`限制提交的文件类型，用逗号隔开的 MIME 类型列表（服务器端也要最好类型检测双保险），如： ###

### 获取文件内容 ###

JavaScript：

var file = document.getElementById('fileToUpload').files[0];

jQuery：

var file = $("#img_input").prop("files")[0];

### 上传 ###

XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件。比起普通的Ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。

// 创建
    var form_data = new FormData();
    // 获取文件
    var file_data = $("#img_input").prop("files")[0];
    // 把所以表单信息
    form_data.append("id", "001");
    form_data.append("name", "test");
    form_data.append("img", file_data);
    $.ajax({
        type: "POST",
        url: "....",
        dataType : "json",
        processData: false,  // 注意：让jQuery不要处理数据
        contentType: false,  // 注意：让jQuery不要设置contentType
        data: form_data
    }).success(function(msg) {
        
        console.log(msg);
    }).fail(function(msg) {
        
        console.log(msg);
    });

### 多文件上传 ###

**方法一 ：一次性上传多个文件**

如果后台接口允许多文件上传，就把文件存到一个变量后上传。

**方法二 ：一次性上传多个文件**

如果后台接口要求单个文件，就循环获取文件信息提交，Ajax使用同步上传async: false。

### 跨域 ###

JSONP是使用GET方法，无法发送文件。可以让后台开启CORS，Ajax也使用跨域crossDomain: true即可。

$.ajax({
        type: "POST",
        url: "....",
        dataType : "json",
        crossDomain: true,
        processData: false,  // 注意：让jQuery不要处理数据
        contentType: false,  // 注意：让jQuery不要设置contentType
        data: form_data
    }).success(function(msg) {
        
        console.log(msg);
    }).fail(function(msg) {
        
        console.log(msg);
    });

[转载地址][Link 1]

[Link 1]: http://laker.me/blog/2016/03/04/16_0304_ajax_file_upload/