使用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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 莫斯科市长谢尔盖·撒比亚宁祝贺在欧锦赛上获得奖牌的莫斯科人。 “这是(不包括苏联)俄罗斯历史上第一次举办花样滑冰欧...
    云游四方的旅人阅读 160评论 0 0
  • 现如今追星及其普遍,定义也在扩大,追演员、歌手、艺人、网红,谁还没个喜欢的圈里人啊。 但是我发现,相较于“粉丝”、...
    诗谙shan阅读 494评论 0 2
  • 对大多数针灸推拿专业的同学来讲,读古书,学经典,分析病例,打好基础上临床才不至于手忙脚乱。可现如今谈到读书...
    希风有点凉阅读 88评论 0 0
  • 文|琉璃苏比 暖小璃:喝水了,小朋友。暖小圆抿了一小口。暖小璃:不行,要三口。暖小圆又连续抿了两口暖小璃:你听,那...
    琉璃苏比阅读 829评论 22 30