<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[刘新修]]></title> 
<link>http://pic1.liuxinxiu.com:80/index.php</link> 
<description><![CDATA[刘新修的个人博客 (Liuxinxiu'S Blog)]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[刘新修]]></copyright>
<item>
<link>http://pic1.liuxinxiu.com:80/new_FormData/</link>
<title><![CDATA[JS FormData对象]]></title> 
<author>刘新修 &lt;admin@yourname.com&gt;</author>
<category><![CDATA[H5/JS/CSS]]></category>
<pubDate>Thu, 31 Mar 2016 02:43:30 +0000</pubDate> 
<guid>http://pic1.liuxinxiu.com:80/new_FormData/</guid> 
<description>
<![CDATA[ 
	<p><span style="font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12px; line-height: 21.6px; background-color: rgb(244, 247, 249);"> </span><span style="padding: 0px; margin: 0px; font-size: 12.5px; letter-spacing: 0.7px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; line-height: 21.6px;">通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。但当我们使用Ajax提交时，这过程就要变成人工的了。因此，FormData对象的出现可以减少我们一些工作量。</span></p><p><span style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; line-height: 1.5; text-indent: 2em; widows: auto; background-color: rgb(238, 238, 221);">想得到一个FormData对象：</span></p><table style="padding: 0px; margin: 0px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; border-collapse: collapse; border-spacing: 1px; border-style: solid; border-color: rgb(248, 248, 248); font-size: 12px; color: rgb(68, 68, 68); line-height: 22.5px; width: 673px;"><tbody style="padding: 0px; margin: 0px;"><tr style="padding: 0px; margin: 0px;"><td style="padding: 1px 2px; margin: 0px; border-style: solid; border-color: rgb(248, 248, 248);"><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">var</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">formdata = </code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">new</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">FormData();</code></td></tr></tbody></table><p style="margin: 10px auto; line-height: 1.5; word-wrap: break-word; word-break: break-all; widows: auto; text-indent: 2em; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 221);">W3c草案提供了三种方案来获取或修改FormData。</p><p style="margin: 10px auto; line-height: 1.5; word-wrap: break-word; word-break: break-all; widows: auto; text-indent: 2em; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 221);"><span style="padding: 0px; margin: 0px; font-family: 宋体, SimSun;">方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：</span></p><table style="padding: 0px; margin: 0px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; border-collapse: collapse; border-spacing: 1px; border-style: solid; border-color: rgb(248, 248, 248); font-size: 12px; color: rgb(68, 68, 68); line-height: 22.5px; width: 673px;"><tbody style="padding: 0px; margin: 0px;"><tr style="padding: 0px; margin: 0px;"><td style="padding: 1px 2px; margin: 0px; border-style: solid; border-color: rgb(248, 248, 248);"><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">var</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">formdata = </code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">new</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">FormData();</code></td></tr></tbody></table><table style="padding: 0px; margin: 0px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; border-collapse: collapse; border-spacing: 1px; border-style: solid; border-color: rgb(248, 248, 248); font-size: 12px; color: rgb(68, 68, 68); line-height: 22.5px; width: 673px;"><tbody style="padding: 0px; margin: 0px;"><tr style="padding: 0px; margin: 0px;"><td style="padding: 1px 2px; margin: 0px; border-style: solid; border-color: rgb(248, 248, 248);"><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">formdata.append(</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">&quot;name&quot;</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">, </code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">&quot;呵呵&quot;</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">);</code></td></tr></tbody></table><table style="padding: 0px; margin: 0px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; border-collapse: collapse; border-spacing: 1px; border-style: solid; border-color: rgb(248, 248, 248); font-size: 12px; color: rgb(68, 68, 68); line-height: 22.5px; width: 673px;"><tbody style="padding: 0px; margin: 0px;"><tr style="padding: 0px; margin: 0px;"><td style="padding: 1px 2px; margin: 0px; border-style: solid; border-color: rgb(248, 248, 248);"><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">formdata.append(</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">&quot;url&quot;</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">, </code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">&quot;http://www.baidu.com/&quot;</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">);<br style="padding: 0px; margin: 0px;" /></code></td></tr></tbody></table><p style="margin: 10px auto; line-height: 1.5; word-wrap: break-word; word-break: break-all; widows: auto; text-indent: 2em; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 221);"><span style="padding: 0px; margin: 0px; font-family: 宋体, SimSun;">方案2：取得form元素对象，将它作为参数传入FormData对象中！</span></p><table style="padding: 0px; margin: 0px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; border-collapse: collapse; border-spacing: 1px; border-style: solid; border-color: rgb(248, 248, 248); font-size: 12px; color: rgb(68, 68, 68); line-height: 22.5px; width: 673px;"><tbody style="padding: 0px; margin: 0px;"><tr style="padding: 0px; margin: 0px;"><td style="padding: 1px 2px; margin: 0px; border-style: solid; border-color: rgb(248, 248, 248);"><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">var</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">formobj =&nbsp;&nbsp;document.getElementById(</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">&quot;form&quot;</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">);</code></td></tr></tbody></table><table style="padding: 0px; margin: 0px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; border-collapse: collapse; border-spacing: 1px; border-style: solid; border-color: rgb(248, 248, 248); font-size: 12px; color: rgb(68, 68, 68); line-height: 22.5px; width: 673px;"><tbody style="padding: 0px; margin: 0px;"><tr style="padding: 0px; margin: 0px;"><td style="padding: 1px 2px; margin: 0px; border-style: solid; border-color: rgb(248, 248, 248);"><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">var</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">formdata = </code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">new</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">FormData(formobj);</code></td></tr></tbody></table><p style="margin: 10px auto; line-height: 1.5; word-wrap: break-word; word-break: break-all; widows: auto; text-indent: 2em; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 221);"><span style="padding: 0px; margin: 0px; font-family: 宋体, SimSun;">方案3：利用form元素对象的getFormData方法生成它！</span></p><table style="padding: 0px; margin: 0px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; border-collapse: collapse; border-spacing: 1px; border-style: solid; border-color: rgb(248, 248, 248); font-size: 12px; color: rgb(68, 68, 68); line-height: 22.5px; width: 673px;"><tbody style="padding: 0px; margin: 0px;"><tr style="padding: 0px; margin: 0px;"><td style="padding: 1px 2px; margin: 0px; border-style: solid; border-color: rgb(248, 248, 248);"><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">var</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">formobj =&nbsp;&nbsp;document.getElementById(</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">&quot;form&quot;</code><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">);</code></td></tr></tbody></table><table style="padding: 0px; margin: 0px; font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; border-collapse: collapse; border-spacing: 1px; border-style: solid; border-color: rgb(248, 248, 248); font-size: 12px; color: rgb(68, 68, 68); line-height: 22.5px; width: 673px;"><tbody style="padding: 0px; margin: 0px;"><tr style="padding: 0px; margin: 0px;"><td style="padding: 1px 2px; margin: 0px; border-style: solid; border-color: rgb(248, 248, 248);"><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">var</code><span style="padding: 0px; margin: 0px;"> </span><code style="padding: 0px; margin: 0px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, 'monospace !important'; color: red;">formdata = formobj.getFormData()</code></td></tr></tbody></table><p style="margin-top: 8px; margin-bottom: 8px; line-height: 22.5px; letter-spacing: 0.5px; font-size: 12.5px; word-wrap: break-word; word-break: break-all; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体;"><span style="padding: 0px; margin: 0px; font-size: 14px;">利用Formdata对象，我们可以使用原生js通过ajax实现异步上传图片，当然，现在已经有jquery的批量上传插件了，实现原理就是利用了Formdata。</span></p><br/>Tags - <a href="http://pic1.liuxinxiu.com:80/tags/formdata/" rel="tag">formdata</a>
]]>
</description>
</item><item>
<link>http://pic1.liuxinxiu.com:80/new_FormData/#blogcomment</link>
<title><![CDATA[[评论] JS FormData对象]]></title> 
<author> &lt;user@domain.com&gt;</author>
<category><![CDATA[评论]]></category>
<pubDate>Thu, 01 Jan 1970 00:00:00 +0000</pubDate> 
<guid>http://pic1.liuxinxiu.com:80/new_FormData/#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>