您的位置:首页 > 理论基础 > 计算机网络

理解文件上传

2017-02-09 16:01 141 查看
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型

Using XMLHttpRequest

使用JavaScript类型数组接受二进制数据

本地上传文件,

可以通过event.target.files获取files集合,

Files集合中包含一组Fils对象,

每个File对象都对应着一个文件,包含只读属性:name、size、type、lastMOdifiedDate。

本地预览文件有很多种方式,

可以用FileReader来读取异步本地文件,

也可以通过URL对象来指向保存在File或Blob中数据,createObjectURL(File/Blob)指向一块内存地址,理论上只读。

常用的还是将图片发送给服务端,服务端返回地址。

上传文件,

如果直接是表单提交,页面会跳转,Content-Type为application/x-www-form-urlencoded。异步提交使用xhr,xhr2支持File、Blob、FormData、DOMString、Document、ArrayBuffer。(xhr1支持的格式jon,jsonp,html,script,text,xml)

提交表单和上传文件

EDIT

XMLHttpRequest 的实例有两种方式提交表单:

* 使用 AJAX

* 使用 FormData API

第二种方式( 使用 FormData API )是最简单最快捷的,但是缺点是被收集的数据不是字符串形式的。
第一种方式反而是最复杂的但也是最灵活和最强大。

只使用 XMLHttpRequest

在大多数用例中,提交表单时即便不使用 FormData API 也不会要求其他的 API。唯一的例外情况是,如果你要上传一个或多个文件,你需要额外的 FileReaderAPI。

提交方法简介一个 html 可以用以下四种方式发送:

* 使用 POST 方法,并设置 enctype 属性为 application/x-www-form-urlencoded (默认)

* 使用 POST 方法,并设置 enctype 属性为 text/plain

* 使用 POST 方法,并设置 enctype 属性为 multipart/form-data

* 使用 GET 方法(这种情况下 enctype 属性会被忽略)

在不支持XHR2的低级浏览器中如果需要异步提交表单,一般采用在隐藏的iframe的中新建表单提交的方式。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  异步 url xmlhttprequest