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);