本地上传文件,
可以通过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的中新建表单提交的方式。