ajax post form上传图片,关于ajax 上传图片 enctype="multipart/form-data"的问题

首先解释下form的enctype属性的问题：

该属性为提交表单浏览器对数据的编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...)，然后把这个字串append到url后面，用?分割，加载这个新的url。

当action为post时候，浏览器把form数据封装到http body中，然后发送到server。

如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。

但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

如果有以下form，并选择了file1.txt上传

enctype="multipart/form-data"

method="post">

What files are you sending?

则有如下body:

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x

Content-Disposition: form-data; name="submit-name"

chmod777

--AaB03x

Content-Disposition: form-data; name="files"; filename="file1.txt"

Content-Type: text/plain

... contents of file1.txt ...

--AaB03x--

那么如何解决图片问题呢？(ajax的httpxmlrequest无法上传文件的)

先创建一个Iframe，然后form的target指向它。

后台处理完后可以输出：

;

这样便可完成判断上传是否成功的功能。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。