Ajaxweb前端上污染图片的几栽方式

1.表单上传

顶传统的图片上传方法是form表单上污染,使用form表单的input[type=”file”]控件,打开系统的文书选择对话框,从而达到选择文件并上传的目的。

Ajax 1

form表单上传

表单上传得留意以下几点:

(1).提供form表单,method必须是post。

(2).form表单的enctype必须是multipart/form-data。

javascript学习交流群:453833554

enctype
属性规定于发送至服务器之前应当怎样对表单数据进行编码。默认地,表单数据会编码为
“application/x-www-form-urlencoded”。就是说,在殡葬到服务器之前,所有字符都见面进展编码。HTML表单如何打包数据文件是由于enctype这个特性决定的。enctype有以下几栽取值:

application/x-www-form-urlencoded:在发送前编码所有字符(默认)(空格被编码为’+’,特殊字符被编码为ASCII十六进制字符)。

multipart/form-data:不针对字符编码。在以含有文件及污染控件的表单时,必须用该值。

text/plain:空格转换为 “+” 加号,但非针对特殊字符编码。

默认enctype=application/x-www-form-urlencoded,所以表单的内容会按URL规则编码,然后因表单的付出方法:

method=’get’ 编码后底表单内容附加在伸手连接后,

method=’post’ 编码后的表单内容作为post请求的正文内容。

(3).提供input type=”file”上传入域。

浏览器请求体如下:

Ajax 2

请求体

2.ajax上传

ajax和FormData可实现页面无刷新的文件及污染效果,主要用了jQuery的ajax()方法及XMLHttpRequest
Level 2的

FormData接口。通过FormData对象足以再次灵敏方便的发送表单数据,因为好独自为表单使用。如果你将表单的编码类型设置为multipart/form-data
,则经过FormData传输的数据格式和表单通过submit()方法传输的数量格式相同。

Ajax 3

ajax无刷新及传

Ajax无刷新上传的章程,本质上同表单上传无异,只是把表单里的情提出来下ajax提交,并且由于前端决定告结果回传后的亮结果。

3.各插件上传

当上传的需求要求不过预览、显示上传进度、中断上污染过程、大文件分片上传等等,这时传统Ajax的表单上传好不便落实这些功能,我们可靠现有插件完成。

苟百度上传插件Web Uploader、jQuery图片预览插件imgPreview
、拖拽上污染与图像预览插件Dropzone.js等等,大家只是根据项目实际上需求选择适合之插件。


javascript学习交流群:453833554

 

相关文章