【转】HTML5+Ajax 上传文件

2017年2月28日 1.6k 次阅读 2 条评论 0 人点赞

原文链接:HTML5+Ajax 上传文件

HTML

input类型设为file

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

accept="MIME_type"限制提交的文件类型,用逗号隔开的 MIME 类型列表(服务器端也要最好类型检测双保险),如:

获取文件内容

JavaScript:

jQuery:

上传

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

多文件上传

方法一 :一次性上传多个文件

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

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

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

跨域

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

 

我就是我,是颜色不一样的烟火。

文章评论(2)

  • 三五豪侠传

    拜读大侠博客,感悟人生道理!

    2017年3月1日
  • 增达网

    就是喜欢看你博客!

    2017年3月6日