使用input与ajax传送文件

accept

表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开。

下方代码只能选择png和gif图片

<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />

multiple

默认只上传一个文件，如果要上传多个文件，使用multiple属性。多个文件时其value值为第一个文件的虚拟路径。默认只上传一个文件

<input id="fileId2" type="file" multiple="multiple" name="file" />

AJAX上传文件

ajax上传的时候，需要获得input:file选择的文件（可能为多个文件），获取其文件列表为：

 document.querySelector("#fileId").files 
 // 返回的是一个文件列表数组

获得的文件列表，然后遍历插入到表单数据当中。即：

// 获得上传文件DOM对象 
var oFiles = document.querySelector("#fileId"); 
// 实例化一个表单数据对象 
var formData = new FormData(); 
// 遍历文件列表，将文件插入到表单中上传。
for (var i = 0, file; file = oFiles[i]; i++) {     
    // 文件名称，文件对象     
    formData.append(file.name, file); 
}

获得表单数据之后，就可以用ajax的POST上传。

// 实例化一个AJAX对象
var xhr = new XMLHttpRequest();
xhr.onload = function() {
    alert("上传成功！");
}
xhr.open("POST", url);

// 发送表单数据
xhr.send(formData);