html5拖拽图片批量ajax无刷新进度上传
<div class="post-content" style="color: rgb(0, 0, 0); font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25.2px;"><h1 style="font-size: 30px; line-height: 1.1; margin-top: 60px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">1、前端拖拽图片</h1><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">之前有篇文章说到HTML5的拖拽（<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">drag</code>、<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">drop</code>，详见：<a target="_blank" href="http://qianduanblog.com/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and-compatibility.html" style="color: rgb(0, 102, 0);">/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and-compatibility.html</a>）。这里说的拖拽图片只是弱化了拖的概念，而强化了拽的操作。从浏览器外部拖动一个文件到浏览器中来，如：</p><p class="text-center" style="margin-bottom: 30px; text-align: center; text-indent: 2em; line-height: 24px;"><img alt="" src="http://qianduanblog.com/uploads/2013/10/20131022205342.png" style="border: 0px; vertical-align: middle; max-width: 100%; height: auto;"></p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">拖动文件到浏览器之后，就会打开浏览器支持的文件，如常用的txt、图片等，如下：</p><p class="text-center" style="margin-bottom: 30px; text-align: center; text-indent: 2em; line-height: 24px;"><img alt="" src="http://qianduanblog.com/uploads/2013/10/20131022205543.png" style="border: 0px; vertical-align: middle; max-width: 100%; height: auto;"></p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">操作如上常用文件，一般都有默认行为来处理这样的事件。这里说的拖拽上传也是一个道理，就是要做的是从浏览器外部拖动文件到浏览器中来，并且在当前页面上传该文件。在表面上看来，这个方法很适合用户体验，但实际情况是用户体验急剧下降。因为大多数人浏览网页的时候是全最大化窗口查看的，而如果要拖拽上传文件的话，那么就需要把浏览器窗口后，非常的麻烦。就比如wordpress的添加媒体功能，也是支持拖拽上传图片的，可用过的人又有多少呢？</p><p class="text-center" style="margin-bottom: 30px; text-align: center; text-indent: 2em; line-height: 24px;"><img alt="" src="http://qianduanblog.com/uploads/2013/10/20131022210022.png" width="620" height="314" style="border: 0px; vertical-align: middle; max-width: 100%; height: auto;"></p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">倒还不如点击选择图片操作来的更加快捷，不过本文旨在说明问题。也许有更好玩的例子没有被发现而已，在此只做抛砖引玉。</p><h2 style="font-size: 20px; line-height: 1.1; margin-top: 40px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">1.1、拖拽文件的files对象</h2><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">在拖拽文件到浏览器，我们需要处理这些文件。</p><div class="dp-highlighter" id="" style="font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Consolas, "Courier New", monospace; font-size: 12px; width: 679px; overflow: auto; margin-left: 9px; padding: 1px; word-break: break-all; background-color: transparent;"><div class="bar"><div class="tools" style="padding: 3px; font-weight: bold;">Js代码 <a title="收藏这段代码" style="color: rgb(0, 102, 0); text-decoration: underline;"><img class="star" src="http://justcoding.iteye.com/images/icon_star.png" alt="收藏代码" style="border-width: 0px; border-style: initial;"></a></div></div><ol start="1" class="dp-c" style="font-size: 1em; line-height: 1.4em; margin-bottom: 1px; padding-top: 2px; padding-bottom: 2px; border: 1px solid rgb(209, 215, 220); color: rgb(43, 145, 175);"><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">$.fn.listen=<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(type,fn){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnthis.each(<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> $(<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">this</span>).addEventListener(type,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(e){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">if</span>(!fn.call($(<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">this</span>),e)){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> e.stopPropagation(); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> e.preventDefault(); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> } </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> },0); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> }); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">} </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">$(document).bind(<span class="string" style="color: blue;">"dragenter"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnfalse; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).bind(<span class="string" style="color: blue;">"dragover"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnfalse; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).listen(<span class="string" style="color: blue;">"drop"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(e){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="comment" style="color: rgb(0, 130, 0); width: auto; border: 0px;">// 这里处理拖拽进来的文件（们）</span> </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}); </span></li></ol></div><p> </p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">如上，可能细心的朋友发现了一些不同。那就是document使用了两个方法来绑定事件，<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">dragenter</code>、<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">dragover</code>使用jquery的<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">bind</code>方法绑定，而drop事件却使用自定义的<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">listen</code>方法绑定，这是为什么呢？因为jquery的事件绑定，为了兼容操作处理的事件的参数event，删减了一些属性使其在各个浏览器都保持一致。而此处用的是event的HTML5属性，恰巧是不兼容低级浏览器的，所以使用jquery的<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">bind</code>方法是无法获取的。我们可以来验证一下这个说法：</p><div class="dp-highlighter" id="" style="font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Consolas, "Courier New", monospace; font-size: 12px; width: 679px; overflow: auto; margin-left: 9px; padding: 1px; word-break: break-all; background-color: transparent;"><div class="bar"><div class="tools" style="padding: 3px; font-weight: bold;">Js代码 <a title="收藏这段代码" style="color: rgb(0, 102, 0); text-decoration: underline;"><img class="star" src="http://justcoding.iteye.com/images/icon_star.png" alt="收藏代码" style="border-width: 0px; border-style: initial;"></a></div></div><ol start="1" class="dp-c" style="font-size: 1em; line-height: 1.4em; margin-bottom: 1px; padding-top: 2px; padding-bottom: 2px; border: 1px solid rgb(209, 215, 220); color: rgb(43, 145, 175);"><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">$(document).bind(<span class="string" style="color: blue;">"dragenter"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnfalse; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).bind(<span class="string" style="color: blue;">"dragover"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnfalse; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).bind(<span class="string" style="color: blue;">"drop"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(e){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> console.log(e); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).listen(<span class="string" style="color: blue;">"drop"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(e){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> console.log(e); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}); </span></li></ol></div><p> </p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">拖拽文件到这个页面，在浏览器控制台得到两个不尽相同的对象：</p><p class="text-center" style="margin-bottom: 30px; text-align: center; text-indent: 2em; line-height: 24px;"><img alt="" src="http://qianduanblog.com/uploads/2013/10/20131022211008.png" style="border: 0px; vertical-align: middle; max-width: 100%; height: auto;"></p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">如图示黄色背景的<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">dataTransfer</code>是浏览器默认的event所独有的，而我们此处用的<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">files</code>对象这是在这里面。</p><div class="dp-highlighter" id="" style="font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Consolas, "Courier New", monospace; font-size: 12px; width: 679px; overflow: auto; margin-left: 9px; padding: 1px; word-break: break-all; background-color: transparent;"><div class="bar"><div class="tools" style="padding: 3px; font-weight: bold;">Js代码 <a title="收藏这段代码" style="color: rgb(0, 102, 0); text-decoration: underline;"><img class="star" src="http://justcoding.iteye.com/images/icon_star.png" alt="收藏代码" style="border-width: 0px; border-style: initial;"></a></div></div><ol start="1" class="dp-c" style="font-size: 1em; line-height: 1.4em; margin-bottom: 1px; padding-top: 2px; padding-bottom: 2px; border: 1px solid rgb(209, 215, 220); color: rgb(43, 145, 175);"><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">console.log(e.dataTransfer.files); </span></li></ol></div><p> </p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">在浏览器控制台输出了：</p><p class="text-center" style="margin-bottom: 30px; text-align: center; text-indent: 2em; line-height: 24px;"><img alt="" src="http://qianduanblog.com/uploads/2013/10/20131022211311.png" style="border: 0px; vertical-align: middle; max-width: 100%; height: auto;"></p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">由图示可知，该files对象是一个数组。<strong>值得注意的是，该files对象只读。</strong>可以接收到文件的基本信息（最后修改时间、文件名称、大小、类型），我们就可以在客户端来处理上传文件之前的操作。比如限制文件必须为图片格式、文件的大小不能超过100KB。</p><div class="dp-highlighter" id="" style="font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Consolas, "Courier New", monospace; font-size: 12px; width: 679px; overflow: auto; margin-left: 9px; padding: 1px; word-break: break-all; background-color: transparent;"><div class="bar"><div class="tools" style="padding: 3px; font-weight: bold;">Js代码 <a title="收藏这段代码" style="color: rgb(0, 102, 0); text-decoration: underline;"><img class="star" src="http://justcoding.iteye.com/images/icon_star.png" alt="收藏代码" style="border-width: 0px; border-style: initial;"></a></div></div><ol start="1" class="dp-c" style="font-size: 1em; line-height: 1.4em; margin-bottom: 1px; padding-top: 2px; padding-bottom: 2px; border: 1px solid rgb(209, 215, 220); color: rgb(43, 145, 175);"><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">$(document).bind(<span class="string" style="color: blue;">"dragenter"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnfalse; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).bind(<span class="string" style="color: blue;">"dragover"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnfalse; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).listen(<span class="string" style="color: blue;">"drop"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(e){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">var</span> files=e.dataTransfer.files; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">var</span> error=<span class="string" style="color: blue;">''</span>; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">for</span>(<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">var</span> i=0;i<files.length;i++){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> console.log(files); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">if</span>(files.size>1024*100)error+=<span class="string" style="color: blue;">'第'</span>+(i+1)+<span class="string" style="color: blue;">'个文件超过大小限制\n'</span>; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">if</span>(!/image/i.test(files.type))error+=<span class="string" style="color: blue;">'第'</span>+(i+1)+<span class="string" style="color: blue;">'个文件不是图片格式\n'</span>; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">} </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"><span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">if</span>(error)alert(error); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}); </span></li></ol></div><p> </p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">会弹出如下警告：</p><p class="text-center" style="margin-bottom: 30px; text-align: center; text-indent: 2em; line-height: 24px;"><img alt="" src="http://qianduanblog.com/uploads/2013/10/20131022212235.png" style="border: 0px; vertical-align: middle; max-width: 100%; height: auto;"></p><h2 style="font-size: 20px; line-height: 1.1; margin-top: 40px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">1.2、处理文件的FileReader对象</h2><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">用户拖拽了符合我们预期的文件，我们就需要对其进行操作。比如本文要做的是用户必须上传100KB以内的图片类型文件。在获取到files对象之后，我们要使用<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">FileReader</code>对象来读取file的文件（该对象人如其名）。</p><div class="dp-highlighter" id="" style="font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Consolas, "Courier New", monospace; font-size: 12px; width: 679px; overflow: auto; margin-left: 9px; padding: 1px; word-break: break-all; background-color: transparent;"><div class="bar"><div class="tools" style="padding: 3px; font-weight: bold;">Js代码 <a title="收藏这段代码" style="color: rgb(0, 102, 0); text-decoration: underline;"><img class="star" src="http://justcoding.iteye.com/images/icon_star.png" alt="收藏代码" style="border-width: 0px; border-style: initial;"></a></div></div><ol start="1" class="dp-c" style="font-size: 1em; line-height: 1.4em; margin-bottom: 1px; padding-top: 2px; padding-bottom: 2px; border: 1px solid rgb(209, 215, 220); color: rgb(43, 145, 175);"><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">$(document).bind(<span class="string" style="color: blue;">"dragenter"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnfalse; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).bind(<span class="string" style="color: blue;">"dragover"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> returnfalse; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}).listen(<span class="string" style="color: blue;">"drop"</span>,<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(e){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">var</span> files=e.dataTransfer.files; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">var</span> error=<span class="string" style="color: blue;">''</span>; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">for</span>(<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">var</span> i=0;i<files.length;i++){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">if</span>(files.size>1024*100)error+=<span class="string" style="color: blue;">'第'</span>+(i+1)+<span class="string" style="color: blue;">'个文件超过大小限制\n'</span>; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">if</span>(!/image/i.test(files.type))error+=<span class="string" style="color: blue;">'第'</span>+(i+1)+<span class="string" style="color: blue;">'个文件不是图片格式\n'</span>; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">} </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"><span class="comment" style="color: rgb(0, 130, 0); width: auto; border: 0px;">// 有错误抛弃</span> </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"><span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">if</span>(error){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> alert(error); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">return</span>; </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">} </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"><span class="comment" style="color: rgb(0, 130, 0); width: auto; border: 0px;">// 处理文件队列</span> </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"><span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">for</span>(<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">var</span> i=0;i<files.length;i++){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> read(files); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">} </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">}); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"><span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span> read(file){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> <span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">var</span> reader=newFileReader(); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> reader.onload=<span class="keyword" style="color: rgb(127, 0, 85); font-weight: bold;">function</span>(e){ </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> $(<span class="string" style="color: blue;">"body"</span>).append(<span class="string" style="color: blue;">'<img src="'</span>+e.target.result+<span class="string" style="color: blue;">'" alt="" />'</span>); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> } </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;"> reader.readAsDataURL(file); </span></li><li style="font-size: 1em; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><span style="color: black;">} </span></li></ol></div><p> </p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">在拖拽合适大小的图片文件到该页面之后：</p><p class="text-center" style="margin-bottom: 30px; text-align: center; text-indent: 2em; line-height: 24px;"><img alt="" src="http://qianduanblog.com/uploads/2013/10/20131022213351.png" style="border: 0px; vertical-align: middle; max-width: 100%; height: auto;"></p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;"><code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">FileReader</code>对象是干嘛的呢？它可以读取文件，并进行相应的操作，涉及到安全问题，该操作不会对图片的源文件产生影响。该对象有如下属性和方法以及事件：</p><ul style="margin-bottom: 20px; padding: 15px 15px 15px 20px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(221, 221, 221); background: rgb(247, 247, 247);"><li style="margin-bottom: 0.25em; margin-left: 30px;"><span style="text-indent: 2em;">属性：为空</span></li><li style="margin-bottom: 0.25em; margin-left: 30px;"><span style="text-indent: 2em;">方法：</span><ul style="margin-bottom: 20px; padding: 15px 15px 15px 20px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(221, 221, 221); background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>about</strong>：中断文件读取</li><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>readAsBinaryString</strong>:读取文件为二进制</li><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>readAsDataURL</strong>：读取文件dataUrl（本例用到的）</li><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>readAsText</strong>：读取文件为文本</li></ul></li><li style="margin-bottom: 0.25em; margin-left: 30px;"><span style="text-indent: 2em;">事件：</span><ul style="margin-bottom: 20px; padding: 15px 15px 15px 20px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(221, 221, 221); background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>onabort</strong>：读取文件中断时触发</li><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>onerror</strong>：读取文件出错时触发</li><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>onload</strong>：读取文件成功时触发（本例用到的）</li><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>onloadstart</strong>：读取文件开始时触发</li><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>onprogress</strong>：读取文件中时一直触发</li><li style="margin-bottom: 0.25em; margin-left: 30px;"><strong>onloadend</strong>：读取文件结束时触发（成功和失败都会触发，如<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">jquery.ajax</code>的<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">complete</code>）</li></ul></li></ul><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">在监听到文件读取成功时，该事件参数e有<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">e.target.result</code>指向的是读取的结果（即本例描述的文件的二进制url）。</p><h2 style="font-size: 20px; line-height: 1.1; margin-top: 40px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">1.3、处理表单的FormData对象</h2><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">选到了合适大小的图片文件，我们就需要把这些文件无刷新上传到服务器，但我们如何发送这些图片到后端呢？传统的ajax方法一直是发送文本格式（Content-Type:application/x-www-form-urlencoded）而发送图片这些大文件需要用到浏览器的原生表单（Content-Type:multipart/form-data）。所幸的是，HTML5的支持的<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">FromData</code>属性可以帮忙完成这一个过程，即封装图片成表单数据以用于提交到后端。</p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;"><code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">FormData</code>类似于<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">jquery.serialize</code>，jquery这一次又走在了前列。不过<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">FormData</code>比<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">serialize</code>要强大一点，它不仅可以在提交表单数据里增加纯文本也可以增加图片等二进制数据。其基本使用方法是：</p><ol class="linenums" style="font-size: 1em; line-height: 1.4em; margin-left: 33px; border: 0px; background: rgb(247, 247, 247);"><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> form1</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">FormData</span><span class="pun">();</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">form1</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"name1"</span><span class="pun">,</span><span class="str" style="color: rgb(221, 17, 68);">"value1"</span><span class="pun">);</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">form1</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"name2"</span><span class="pun">,</span><span class="str" style="color: rgb(221, 17, 68);">"value2"</span><span class="pun">);</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">form1</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"file"</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">file</span><span class="pun">对象);</span></li></ol><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">如上，其作用相当于：</p><ol class="linenums" style="font-size: 1em; line-height: 1.4em; margin-left: 33px; border: 0px; background: rgb(247, 247, 247);"><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><form></span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><input</span><span class="atn" style="color: teal;">type</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"text"</span><span class="atn" style="color: teal;">name</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"name1"</span><span class="atn" style="color: teal;">value</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"value1"</span><span class="tag" style="color: rgb(30, 52, 123);">></span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><input</span><span class="atn" style="color: teal;">type</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"text"</span><span class="atn" style="color: teal;">name</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"name2"</span><span class="atn" style="color: teal;">value</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"value2"</span><span class="tag" style="color: rgb(30, 52, 123);">></span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><input</span><span class="atn" style="color: teal;">type</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"file"</span><span class="atn" style="color: teal;">name</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"file"</span><span class="atn" style="color: teal;">id</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">""</span><span class="tag" style="color: rgb(30, 52, 123);">></span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"></form></span></li></ol><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">所以接着1.2继续，把合适的图片组装成form数据便于异步传输。</p><ol class="linenums" style="font-size: 1em; line-height: 1.4em; margin-left: 33px; border: 0px; background: rgb(247, 247, 247);"><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">document</span><span class="pun">).</span><span class="pln" style="color: rgb(72, 72, 76);">bind</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"dragenter"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="kwd" style="color: rgb(30, 52, 123);">false</span><span class="pun">;</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}).</span><span class="pln" style="color: rgb(72, 72, 76);">bind</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"dragover"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="kwd" style="color: rgb(30, 52, 123);">false</span><span class="pun">;</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}).</span><span class="pln" style="color: rgb(72, 72, 76);">listen</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"drop"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">){</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> files</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">dataTransfer</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> error</span><span class="pun">=</span><span class="str" style="color: rgb(221, 17, 68);">''</span><span class="pun">;</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">for</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun"><</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">++){</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">].</span><span class="pln" style="color: rgb(72, 72, 76);">size</span><span class="pun">></span><span class="lit" style="color: rgb(25, 95, 145);">1024</span><span class="pun">*</span><span class="lit" style="color: rgb(25, 95, 145);">100</span><span class="pun">)</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">+=</span><span class="str" style="color: rgb(221, 17, 68);">'第'</span><span class="pun">+(</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">+</span><span class="lit" style="color: rgb(25, 95, 145);">1</span><span class="pun">)+</span><span class="str" style="color: rgb(221, 17, 68);">'个文件超过大小限制\n'</span><span class="pun">;</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(!</span><span class="str" style="color: rgb(221, 17, 68);">/image/</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">test</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">].</span><span class="pln" style="color: rgb(72, 72, 76);">type</span><span class="pun">))</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">+=</span><span class="str" style="color: rgb(221, 17, 68);">'第'</span><span class="pun">+(</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">+</span><span class="lit" style="color: rgb(25, 95, 145);">1</span><span class="pun">)+</span><span class="str" style="color: rgb(221, 17, 68);">'个文件不是图片格式\n'</span><span class="pun">;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 有错误抛弃</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">){</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">alert</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">);</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 处理文件队列</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">for</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun"><</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">++){</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">read</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">]);</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 组装成表单数据</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> formData</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">FormData</span><span class="pun">();</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">for</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun"><</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">++){</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">formData</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">'files[]'</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">]);</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">});</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 读取图片</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pln" style="color: rgb(72, 72, 76);"> read</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">file</span><span class="pun">){</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> reader</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">FileReader</span><span class="pun">();</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">reader</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onload</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">){</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"body"</span><span class="pun">).</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">'<img src="'</span><span class="pun">+</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">target</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">result</span><span class="pun">+</span><span class="str" style="color: rgb(221, 17, 68);">'" alt="" />'</span><span class="pun">);</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">reader</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">readAsDataURL</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">file</span><span class="pun">);</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li></ol><div class="alert alert-info"><p>注：以上代码仅供示例，上述的<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">formData.append('files[]',...)</code>，有中括号表示多文件批量上传。</p></div><h2 style="font-size: 20px; line-height: 1.1; margin-top: 40px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">1.4、ajax上传的XMLHttpRequest对象</h2><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">有了表单数据，我们就可以使用异步传输发送给服务端。</p><ol class="linenums" style="font-size: 1em; line-height: 1.4em; margin-left: 33px; border: 0px; background: rgb(247, 247, 247);"><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">document</span><span class="pun">).</span><span class="pln" style="color: rgb(72, 72, 76);">bind</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"dragenter"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="kwd" style="color: rgb(30, 52, 123);">false</span><span class="pun">;</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}).</span><span class="pln" style="color: rgb(72, 72, 76);">bind</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"dragover"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="kwd" style="color: rgb(30, 52, 123);">false</span><span class="pun">;</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}).</span><span class="pln" style="color: rgb(72, 72, 76);">listen</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"drop"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">){</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> files</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">dataTransfer</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> error</span><span class="pun">=</span><span class="str" style="color: rgb(221, 17, 68);">''</span><span class="pun">;</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">for</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun"><</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">++){</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">].</span><span class="pln" style="color: rgb(72, 72, 76);">size</span><span class="pun">></span><span class="lit" style="color: rgb(25, 95, 145);">1024</span><span class="pun">*</span><span class="lit" style="color: rgb(25, 95, 145);">100</span><span class="pun">)</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">+=</span><span class="str" style="color: rgb(221, 17, 68);">'第'</span><span class="pun">+(</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">+</span><span class="lit" style="color: rgb(25, 95, 145);">1</span><span class="pun">)+</span><span class="str" style="color: rgb(221, 17, 68);">'个文件超过大小限制\n'</span><span class="pun">;</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(!</span><span class="str" style="color: rgb(221, 17, 68);">/image/</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">test</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">].</span><span class="pln" style="color: rgb(72, 72, 76);">type</span><span class="pun">))</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">+=</span><span class="str" style="color: rgb(221, 17, 68);">'第'</span><span class="pun">+(</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">+</span><span class="lit" style="color: rgb(25, 95, 145);">1</span><span class="pun">)+</span><span class="str" style="color: rgb(221, 17, 68);">'个文件不是图片格式\n'</span><span class="pun">;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 有错误抛弃</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">){</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">alert</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">);</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 处理文件队列</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">for</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun"><</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">++){</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">read</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">]);</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 组装成表单数据</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> formData</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">FormData</span><span class="pun">();</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">for</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun"><</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">++){</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">formData</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">'files[]'</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">]);</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 异步传输</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">ajax</span><span class="pun">();</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">});</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 读取图片</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pln" style="color: rgb(72, 72, 76);"> read</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">file</span><span class="pun">){</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> reader</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">FileReader</span><span class="pun">();</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">reader</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onload</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">){</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"body"</span><span class="pun">).</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">'<img src="'</span><span class="pun">+</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">target</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">result</span><span class="pun">+</span><span class="str" style="color: rgb(221, 17, 68);">'" alt="" />'</span><span class="pun">);</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">reader</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">readAsDataURL</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">file</span><span class="pun">);</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 异步传输</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pln" style="color: rgb(72, 72, 76);"> ajax</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">formData</span><span class="pun">){</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> xhr</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">XMLHttpRequest</span><span class="pun">();</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">open</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"post"</span><span class="pun">,</span><span class="str" style="color: rgb(221, 17, 68);">"upload.php"</span><span class="pun">);</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onload</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">alert</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"上传完成！"</span><span class="pun">);</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">send</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">formData</span><span class="pun">);</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li></ol><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">如果上传不出错的话，那么在上传结束的时候会弹出“上传完成！”的确认框。</p><h2 style="font-size: 20px; line-height: 1.1; margin-top: 40px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">1.5、ajax上传的进度</h2><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">因为上传文件和上传纯文本，其数据量不是一个级别的，所以为了友好的用户体验，我们需要实时告诉用户上传的进度目前是多少。可喜的是，HTML5已经帮我们完成这个步骤，可以这么做来实时获取当前上传的进度：</p><ol class="linenums" style="font-size: 1em; line-height: 1.4em; margin-left: 33px; border: 0px; background: rgb(247, 247, 247);"><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 异步传输</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pln" style="color: rgb(72, 72, 76);"> ajax</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">formData</span><span class="pun">){</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> xhr</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">XMLHttpRequest</span><span class="pun">();</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">open</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"post"</span><span class="pun">,</span><span class="str" style="color: rgb(221, 17, 68);">"upload.php"</span><span class="pun">);</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onload</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">alert</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"上传完成！"</span><span class="pun">);</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">// 上传进度</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">upload</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onprogress</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">){</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">lengthComputable</span><span class="pun">)</span><span class="pun">{</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> percent </span><span class="pun">=</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">loaded </span><span class="pun">/</span><span class="pln" style="color: rgb(72, 72, 76);"> e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">total </span><span class="pun">*</span><span class="lit" style="color: rgb(25, 95, 145);">100</span><span class="pun">|</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">)+</span><span class="str" style="color: rgb(221, 17, 68);">"%"</span><span class="pun">;</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">console</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">log</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">percent</span><span class="pun">);</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">send</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">formData</span><span class="pun">);</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li></ol><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">关于<code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244);">XMLHttpRequest</code>的更多使用方法，这里不做赘述，可以参考文章末尾的参考资料。</p><h2 style="font-size: 20px; line-height: 1.1; margin-top: 40px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">1.6、完整的源代码</h2><ol class="linenums" style="font-size: 1em; line-height: 1.4em; margin-left: 33px; border: 0px; background: rgb(247, 247, 247);"><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="dec" style="color: teal;"><!doctype html></span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><html</span><span class="atn" style="color: teal;">lang</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"en"</span><span class="tag" style="color: rgb(30, 52, 123);">></span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><head></span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><meta</span><span class="atn" style="color: teal;">charset</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"UTF-8"</span><span class="tag" style="color: rgb(30, 52, 123);">></span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><title></span><span class="pln" style="color: rgb(72, 72, 76);">拖拽图片到这里来并上传</span><span class="tag" style="color: rgb(30, 52, 123);"></title></span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><style></span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">h2 small</span><span class="pun">{</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">color</span><span class="pun">:</span><span class="com" style="color: rgb(147, 161, 161);">#888;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">font</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">weight</span><span class="pun">:</span><span class="pln" style="color: rgb(72, 72, 76);"> normal</span><span class="pun">;</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">margin</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">left</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">30px</span><span class="pun">;</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">font</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">size</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">80</span><span class="pun">%;</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">box</span><span class="pun">{</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">border</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">1px</span><span class="pln" style="color: rgb(72, 72, 76);"> solid </span><span class="com" style="color: rgb(147, 161, 161);">#ccc;</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">background</span><span class="pun">:</span><span class="com" style="color: rgb(147, 161, 161);">#f5f5f5;</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">padding</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">10px</span><span class="pun">;</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">margin</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">bottom</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">20px</span><span class="pun">;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">box2</span><span class="pun">{</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">border</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">1px</span><span class="pln" style="color: rgb(72, 72, 76);"> solid </span><span class="com" style="color: rgb(147, 161, 161);">#EB9D45;</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">background</span><span class="pun">:</span><span class="com" style="color: rgb(147, 161, 161);">#FFF2E3;</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">padding</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">10px</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">margin</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">bottom</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">20px</span><span class="pun">;</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="com" style="color: rgb(147, 161, 161);">#progress{</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">margin</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">left</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">10px</span><span class="pun">;</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">box img</span><span class="pun">,</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">box2 img</span><span class="pun">{</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">max</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">height</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">100px</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">height</span><span class="pun">:</span><span class="kwd" style="color: rgb(30, 52, 123);">auto</span><span class="pun">;</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">width</span><span class="pun">:</span><span class="kwd" style="color: rgb(30, 52, 123);">auto</span><span class="pun">;</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">padding</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">2px</span><span class="pun">;</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">border</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">1px</span><span class="pln" style="color: rgb(72, 72, 76);"> solid </span><span class="com" style="color: rgb(147, 161, 161);">#ddd;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">background</span><span class="pun">:</span><span class="com" style="color: rgb(147, 161, 161);">#fff;</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">margin</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">right</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">20px</span><span class="pun">;</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">margin</span><span class="pun">-</span><span class="pln" style="color: rgb(72, 72, 76);">bottom</span><span class="pun">:</span><span class="lit" style="color: rgb(25, 95, 145);">20px</span><span class="pun">;</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"></style></span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"></head></span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><body></span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><div</span><span class="atn" style="color: teal;">class</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"box"</span><span class="tag" style="color: rgb(30, 52, 123);">></span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><h2></span><span class="pln" style="color: rgb(72, 72, 76);">拖拽图片到这里来</span><span class="tag" style="color: rgb(30, 52, 123);"><small</span><span class="atn" style="color: teal;">id</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"message"</span><span class="tag" style="color: rgb(30, 52, 123);">></small></h2></span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><div</span><span class="atn" style="color: teal;">id</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"box"</span><span class="tag" style="color: rgb(30, 52, 123);">></div></span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"></div></span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><p></span><span class="pln" style="color: rgb(72, 72, 76);">原文：</span><span class="tag" style="color: rgb(30, 52, 123);"><a</span><span class="atn" style="color: teal;">href</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"/post/undefined.html700"</span><span class="tag" style="color: rgb(30, 52, 123);">></span><span class="pln" style="color: rgb(72, 72, 76);">/post/undefined.html700</span><span class="tag" style="color: rgb(30, 52, 123);"></a></p></span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><div</span><span class="atn" style="color: teal;">class</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"box2"</span><span class="tag" style="color: rgb(30, 52, 123);">></span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><h2></span><span class="pln" style="color: rgb(72, 72, 76);">已上传的图片</span><span class="tag" style="color: rgb(30, 52, 123);"><small</span><span class="atn" style="color: teal;">id</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"progress"</span><span class="tag" style="color: rgb(30, 52, 123);">></small></h2></span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><div</span><span class="atn" style="color: teal;">id</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"box2"</span><span class="tag" style="color: rgb(30, 52, 123);">></div></span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"></div></span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><script</span><span class="atn" style="color: teal;">src</span><span class="pun">=</span><span class="atv" style="color: rgb(221, 17, 68);">"http://libs.baidu.com/jquery/2.0.3/jquery.min.js"</span><span class="tag" style="color: rgb(30, 52, 123);">></script></span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"><script></span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">fn</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">listen</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">type</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">fn</span><span class="pun">){</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="kwd" style="color: rgb(30, 52, 123);">this</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">each</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">this</span><span class="pun">)[</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">].</span><span class="pln" style="color: rgb(72, 72, 76);">addEventListener</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">type</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">){</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(!</span><span class="pln" style="color: rgb(72, 72, 76);">fn</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">call</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">this</span><span class="pun">),</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">)){</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">stopPropagation</span><span class="pun">();</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">preventDefault</span><span class="pun">();</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">},</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">);</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">});</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> $box</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"#box"</span><span class="pun">);</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> $message</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"#message"</span><span class="pun">);</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> $box2</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"#box2"</span><span class="pun">);</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> $progress</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"#progress"</span><span class="pun">);</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> isuploading</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> hasBtSize</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> errorArray</span><span class="pun">=[];</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">document</span><span class="pun">).</span><span class="pln" style="color: rgb(72, 72, 76);">bind</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"dragenter"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="kwd" style="color: rgb(30, 52, 123);">false</span><span class="pun">;</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}).</span><span class="pln" style="color: rgb(72, 72, 76);">bind</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"dragover"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="kwd" style="color: rgb(30, 52, 123);">false</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}).</span><span class="pln" style="color: rgb(72, 72, 76);">listen</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"drop"</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">){</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">isuploading</span><span class="pun">)</span><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="pun">;</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> error</span><span class="pun">=</span><span class="str" style="color: rgb(221, 17, 68);">''</span><span class="pun">;</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> num</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">1</span><span class="pun">;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> files</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">e</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">dataTransfer</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">;</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> j</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">;</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$box</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">empty</span><span class="pun">();</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">for</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> i </span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);"> i </span><span class="pun"><</span><span class="pln" style="color: rgb(72, 72, 76);"> j</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">++)</span><span class="pun">{</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">){</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> reader </span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">FileReader</span><span class="pun">();</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">reader</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onload </span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">event</span><span class="pun">)</span><span class="pun">{</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$box</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"<img src='"</span><span class="pun">+</span><span class="pln" style="color: rgb(72, 72, 76);"> event</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">target</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">result </span><span class="pun">+</span><span class="str" style="color: rgb(221, 17, 68);">"' /> "</span><span class="pun">);</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">].</span><span class="pln" style="color: rgb(72, 72, 76);">size</span><span class="pun">></span><span class="lit" style="color: rgb(25, 95, 145);">1024</span><span class="pun">*</span><span class="lit" style="color: rgb(25, 95, 145);">400</span><span class="pun">||</span><span class="pun">!</span><span class="str" style="color: rgb(221, 17, 68);">/image/</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">test</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">].</span><span class="pln" style="color: rgb(72, 72, 76);">type</span><span class="pun">)){</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">errorArray</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">push</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">num</span><span class="pun">);</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">num</span><span class="pun">++;</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">num</span><span class="pun">></span><span class="pln" style="color: rgb(72, 72, 76);">j</span><span class="pun">){</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">errorArray</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">){</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">errorArray</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">join</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">','</span><span class="pun">);</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$message</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">html</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"其中第 "</span><span class="pun">+</span><span class="pln" style="color: rgb(72, 72, 76);">error</span><span class="pun">+</span><span class="str" style="color: rgb(221, 17, 68);">" 个文件大小超过限制或不是图片，本次上传已被取消。"</span><span class="pun">);</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">errorArray</span><span class="pun">=[];</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="pun">;</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">upload</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">);</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">};</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">reader</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">readAsDataURL</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">]);</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">})(</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">);</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="kwd" style="color: rgb(30, 52, 123);">false</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">});</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pln" style="color: rgb(72, 72, 76);"> upload</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">){</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">isuploading</span><span class="pun">)</span><span class="kwd" style="color: rgb(30, 52, 123);">return</span><span class="pun">;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">isuploading</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">1</span><span class="pun">;</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> formData</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">FormData</span><span class="pun">();</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> isComplete</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">for</span><span class="pun">(</span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);"> i </span><span class="pun"><</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">length</span><span class="pun">;</span><span class="pln" style="color: rgb(72, 72, 76);"> i</span><span class="pun">++)</span><span class="pun">{</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">formData</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"files[]"</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">files</span><span class="pun">[</span><span class="pln" style="color: rgb(72, 72, 76);">i</span><span class="pun">]);</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">};</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> xhr</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="typ" style="color: teal;">XMLHttpRequest</span><span class="pun">();</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">open</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">'post'</span><span class="pun">,</span><span class="str" style="color: rgb(221, 17, 68);">'upload.php'</span><span class="pun">);</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onload</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$progress</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">html</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"上传完成！"</span><span class="pun">);</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">};</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onreadystatechange</span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(){</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">xhr </span><span class="pun">&&</span><span class="pln" style="color: rgb(72, 72, 76);"> xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">readyState </span><span class="pun">===</span><span class="lit" style="color: rgb(25, 95, 145);">4</span><span class="pun">)</span><span class="pun">{</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">status </span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);"> xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">status</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(!</span><span class="pln" style="color: rgb(72, 72, 76);">isComplete </span><span class="pun">&&</span><span class="pln" style="color: rgb(72, 72, 76);"> status </span><span class="pun">>=</span><span class="lit" style="color: rgb(25, 95, 145);">200</span><span class="pun">&&</span><span class="pln" style="color: rgb(72, 72, 76);"> status </span><span class="pun"><</span><span class="lit" style="color: rgb(25, 95, 145);">300</span><span class="pun">||</span><span class="pln" style="color: rgb(72, 72, 76);"> status </span><span class="pun">===</span><span class="lit" style="color: rgb(25, 95, 145);">304</span><span class="pun">)</span><span class="pun">{</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">isComplete </span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">true</span><span class="pun">;</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> json</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">parseJSON</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">responseText</span><span class="pun">);</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$box2</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">empty</span><span class="pun">();</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$box</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">empty</span><span class="pun">();</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$message</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">empty</span><span class="pun">();</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">each</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">json</span><span class="pun">,</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">key</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">val</span><span class="pun">){</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$box2</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"<img src='"</span><span class="pun">+</span><span class="pln" style="color: rgb(72, 72, 76);"> val </span><span class="pun">+</span><span class="str" style="color: rgb(221, 17, 68);">"' />"</span><span class="pun">);</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">});</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">isuploading</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span><span class="kwd" style="color: rgb(30, 52, 123);">else</span><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(!</span><span class="pln" style="color: rgb(72, 72, 76);">isComplete</span><span class="pun">)</span><span class="pun">{</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">isComplete </span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">true</span><span class="pun">;</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$box</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">html</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"网络错误！"</span><span class="pun">);</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">isuploading</span><span class="pun">=</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr </span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">null</span><span class="pun">;</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">upload</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">onprogress </span><span class="pun">=</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">event</span><span class="pun">)</span><span class="pun">{</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">event</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">lengthComputable</span><span class="pun">)</span><span class="pun">{</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> percent </span><span class="pun">=</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">event</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">loaded </span><span class="pun">/</span><span class="pln" style="color: rgb(72, 72, 76);"> event</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">total </span><span class="pun">*</span><span class="lit" style="color: rgb(25, 95, 145);">100</span><span class="pun">|</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun">)+</span><span class="str" style="color: rgb(221, 17, 68);">"%"</span><span class="pun">;</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$progress</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">html</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">percent</span><span class="pun">);</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">xhr</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">send</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">formData</span><span class="pun">);</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"></script></span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"></body></span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="tag" style="color: rgb(30, 52, 123);"></html></span></li></ol><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">在上传过程中：</p><p class="text-center" style="margin-bottom: 30px; text-align: center; text-indent: 2em; line-height: 24px;"><img alt="" src="http://qianduanblog.com/uploads/2013/10/20131022223807.png" style="border: 0px; vertical-align: middle; max-width: 100%; height: auto;"></p><h1 style="font-size: 30px; line-height: 1.1; margin-top: 60px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">2、后台上传处理</h1><ol class="linenums" style="font-size: 1em; line-height: 1.4em; margin-left: 33px; border: 0px; background: rgb(247, 247, 247);"><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun"><?</span><span class="pln" style="color: rgb(72, 72, 76);">php</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$uploaddir </span><span class="pun">=</span><span class="str" style="color: rgb(221, 17, 68);">'img/'</span><span class="pun">;</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$src_array</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">array</span><span class="pun">();</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">isset</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">$_FILES</span><span class="pun">[</span><span class="str" style="color: rgb(221, 17, 68);">'files'</span><span class="pun">])){</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">foreach</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">$_FILES</span><span class="pun">[</span><span class="str" style="color: rgb(221, 17, 68);">'files'</span><span class="pun">][</span><span class="str" style="color: rgb(221, 17, 68);">"error"</span><span class="pun">]</span><span class="kwd" style="color: rgb(30, 52, 123);">as</span><span class="pln" style="color: rgb(72, 72, 76);"> $key </span><span class="pun">=></span><span class="pln" style="color: rgb(72, 72, 76);"> $error</span><span class="pun">)</span><span class="pun">{</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">$error</span><span class="pun">==</span><span class="pln" style="color: rgb(72, 72, 76);">UPLOAD_ERR_OK</span><span class="pun">){</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(!</span><span class="pln" style="color: rgb(72, 72, 76);">preg_match</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"#image#"</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">$_FILES</span><span class="pun">[</span><span class="str" style="color: rgb(221, 17, 68);">"files"</span><span class="pun">][</span><span class="str" style="color: rgb(221, 17, 68);">"type"</span><span class="pun">][</span><span class="pln" style="color: rgb(72, 72, 76);">$key</span><span class="pun">]))</span><span class="kwd" style="color: rgb(30, 52, 123);">continue</span><span class="pun">;</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">$_FILES</span><span class="pun">[</span><span class="str" style="color: rgb(221, 17, 68);">"files"</span><span class="pun">][</span><span class="str" style="color: rgb(221, 17, 68);">"size"</span><span class="pun">][</span><span class="pln" style="color: rgb(72, 72, 76);">$key</span><span class="pun">]></span><span class="lit" style="color: rgb(25, 95, 145);">1024</span><span class="pun">*</span><span class="lit" style="color: rgb(25, 95, 145);">400</span><span class="pun">)</span><span class="kwd" style="color: rgb(30, 52, 123);">continue</span><span class="pun">;</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$tmp_name </span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);"> $_FILES</span><span class="pun">[</span><span class="str" style="color: rgb(221, 17, 68);">"files"</span><span class="pun">][</span><span class="str" style="color: rgb(221, 17, 68);">"tmp_name"</span><span class="pun">][</span><span class="pln" style="color: rgb(72, 72, 76);">$key</span><span class="pun">];</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$name </span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);"> $_FILES</span><span class="pun">[</span><span class="str" style="color: rgb(221, 17, 68);">"files"</span><span class="pun">][</span><span class="str" style="color: rgb(221, 17, 68);">"name"</span><span class="pun">][</span><span class="pln" style="color: rgb(72, 72, 76);">$key</span><span class="pun">];</span></li><li class="L2" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$name</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);"> date</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"YmdHis"</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">time</span><span class="pun">()).</span><span class="pln" style="color: rgb(72, 72, 76);">preg_replace</span><span class="pun">(</span><span class="str" style="color: rgb(221, 17, 68);">"#[^\w\.]#"</span><span class="pun">,</span><span class="str" style="color: rgb(221, 17, 68);">""</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);">$name</span><span class="pun">);</span></li><li class="L3" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$uploadfile </span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);"> $uploaddir</span><span class="pun">.</span><span class="pln" style="color: rgb(72, 72, 76);">$name</span><span class="pun">;</span></li><li class="L4" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$ret</span><span class="pun">=</span><span class="pln" style="color: rgb(72, 72, 76);">move_uploaded_file</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">$tmp_name</span><span class="pun">,</span><span class="pln" style="color: rgb(72, 72, 76);"> $uploadfile</span><span class="pun">);</span></li><li class="L5" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="kwd" style="color: rgb(30, 52, 123);">if</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">$ret</span><span class="pun">){</span></li><li class="L6" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">$src_array</span><span class="pun">[]=</span><span class="pln" style="color: rgb(72, 72, 76);">$uploadfile</span><span class="pun">;</span></li><li class="L7" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L8" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L9" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L0" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pun">}</span></li><li class="L1" style="margin-bottom: 0.25em; margin-left: 30px; padding-left: 12px; color: rgb(190, 190, 197); line-height: 24px;"><span class="pln" style="color: rgb(72, 72, 76);">echo json_encode</span><span class="pun">(</span><span class="pln" style="color: rgb(72, 72, 76);">$src_array</span><span class="pun">);</span></li></ol><h1 style="font-size: 30px; line-height: 1.1; margin-top: 60px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">3、demo</h1><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">demo地址：<a target="_blank" title="demo" href="http://demo.qianduanblog.com/2700/1.html" style="color: rgb(0, 102, 0);">http://demo.qianduanblog.com/2700/1.html</a></p><p style="margin-bottom: 30px; text-indent: 2em; line-height: 24px;">jquery批量上传插件详细见：<a target="_blank" href="http://qianduanblog.com/post/jquery-plugin-11-jquery-upload-free-refresh-batch-ajax-progress-upload.html" style="color: rgb(0, 102, 0);">/post/jquery-plugin-11-jquery-upload-free-refresh-batch-ajax-progress-upload.html</a>。</p><h1 style="font-size: 30px; line-height: 1.1; margin-top: 60px; margin-bottom: 10px; padding-left: 10px; color: inherit; font-family: inherit; font-weight: 500; border-left-width: 2px; border-left-style: solid; border-left-color: rgb(80, 80, 80);">4、参考资料</h1><ul style="margin-bottom: 20px; padding: 15px 15px 15px 20px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(221, 221, 221); background: rgb(247, 247, 247);"><li style="margin-bottom: 0.25em; margin-left: 30px;"><a target="_blank" href="http://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/" style="color: rgb(0, 102, 0);">http://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/</a></li><li style="margin-bottom: 0.25em; margin-left: 30px;"><a target="_blank" href="http://www.jsmix.com/blog/html5/file-reader.html" style="color: rgb(0, 102, 0);">http://www.jsmix.com/blog/html5/file-reader.html</a></li><li style="margin-bottom: 0.25em; margin-left: 30px;"><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/FormData?redirectlocale=en-US&redirectslug=Web%2FAPI%2FXMLHttpRequest%2FFormData" style="color: rgb(0, 102, 0);">https://developer.mozilla.org/en-US/docs/Web/API/FormData?redirectlocale=en-US&redirectslug=Web%2FAPI%2FXMLHttpRequest%2FFormData</a></li><li style="margin-bottom: 0.25em; margin-left: 30px;"><a target="_blank" href="http://www.html5rocks.com/zh/tutorials/file/xhr2/" style="color: rgb(0, 102, 0);">http://www.html5rocks.com/zh/tutorials/file/xhr2/</a></li><li style="margin-bottom: 0.25em; margin-left: 30px;"><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHTTPRequest" style="color: rgb(0, 102, 0);">https://developer.mozilla.org/en-US/docs/Web/API/XMLHTTPRequest</a></li><li style="margin-bottom: 0.25em; margin-left: 30px;"><a target="_blank" href="http://developer.51cto.com/art/200911/164751.htm" style="color: rgb(0, 102, 0);">http://developer.51cto.com/art/200911/164751.htm</a></li><li style="margin-bottom: 0.25em; margin-left: 30px;"><a target="_blank" href="http://www.html5rocks.com/zh/tutorials/file/dndfiles/" style="color: rgb(0, 102, 0);">http://www.html5rocks.com/zh/tutorials/file/dndfiles/</a></li></ul></div><p style="color: rgb(0, 0, 0); font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25.2px;"> </p><ul style="margin-bottom: 1.5em; color: rgb(0, 0, 0); font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25.2px;"><li style="margin-bottom: 0.25em; margin-left: 30px;">载请来源（ <a target="_blank" href="http://qianduanblog.com/" style="color: rgb(0, 102, 0);"><strong>前端博客</strong></a>）</li><li style="margin-bottom: 0.25em; margin-left: 30px;">文章标题： <strong><a target="_blank" title="JS学习32：html5拖拽图片批量ajax无刷新进度上传" href="http://qianduanblog.com/post/js-learning-32-html5-drag-batch-ajax-free-refresh-progress-upload.html" style="color: rgb(0, 102, 0);">《JS学习32：html5拖拽图片批量ajax无刷新进度上传》</a></strong></li></ul><p></p>
页:
[1]