HTML5的File文件操作

Posted by baicai on July 31, 2016

新增--input file美化:</p>

<span style="color: rgb(34, 34, 34); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 22.1px;">bootstrap 的 file 组件,繁琐,但兼容全面。</span>

<input id="lefile" type="file" style="display:none">
<div class="input-append">
   <input id="photoCover" class="input-large" type="text">
   <a class="btn" onclick="$('input[id=lefile]').click();">Browse</a>
</div>
<pre style="font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; margin-bottom: 0px; color: rgb(34, 34, 34); font-size: 12px; line-height: 18px;"><code class="language-js" style="font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; overflow: auto;">$('input[id=lefile]').change(function() { $('#photoCover').val($(this).val()); });</code></pre>


前言

<p style="margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: "microsoft yahei"; font-size: 15px; line-height: 35px;">在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建。</p><p style="margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: "microsoft yahei"; font-size: 15px; line-height: 35px;">

<p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。</p><p><span style=”color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄。</span></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>看个简单例子:</p><pre style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”><pre style="line-height: 1.42857; border: 0px; border-radius: 0px; background: transparent;"><div id="LC1" class="line"><!– oscar999 –></div><div id="LC2" class="line"><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”></div><div id="LC3" class="line"><html></div><div id="LC4" class="line"> <head></div><div id="LC5" class="line"> <meta http-equiv=”content-type” content=”text/html; charset=utf-8”></div><div id="LC6" class="line"> <meta name=”author” content=”oscar999”></div><div id="LC7" class="line"> <title></title></div><div id="LC8" class="line"> <script></div><div id="LC9" class="line"> function handleFiles(files)</div><div id="LC10" class="line"> {</div><div id="LC11" class="line"> if(files.length)</div><div id="LC12" class="line"> {</div><div id="LC13" class="line"> var file = files[0];</div><div id="LC14" class="line"> var reader = new FileReader();</div><div id="LC15" class="line"> reader.onload = function()</div><div id="LC16" class="line"> {</div><div id="LC17" class="line"> document.getElementById(“filecontent”).innerHTML = this.result;</div><div id="LC18" class="line"> };</div><div id="LC19" class="line"> reader.readAsText(file);</div><div id="LC20" class="line"> }</div><div id="LC21" class="line"> }</div><div id="LC22" class="line"> </script></div><div id="LC23" class="line"> </div><div id="LC24" class="line"> </head></div><div id="LC25" class="line"> <body></div><div id="LC26" class="line">
</div><div id="LC27" class="line"> <input type=”file” id=”file” onchange=”handleFiles(this.files)”/></div><div id="LC28" class="line"> <div id=”filecontent”></div></div><div id="LC29" class="line"> </body></div><div id="LC30" class="line"></html></div></pre></pre><p><span style=”color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>这里读取一个文件, 显示在div 中。</span></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>(在IE8 中 无效, this.files 无法读取文件。这个属于html5 的特性)
</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>当选择了一个文件时,就会把包含这个文件的列表(一个FileList对象)作为参数传给handleFiles()函数了。<br>这个FileList对象类似一个数组,可以知道文件的数目,而它的元素就是File对象了。<br>从这个File对象可以获取name、size、lastModifiedDate和type等属性。<br>把这个File对象传给FileReader对象的读取方法,就能读取文件了。<br></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><h3 style="color: rgb(85, 85, 85); line-height: 35px; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(83, 142, 213);">HTML5 Drag and Drop File
</h3><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>HTML5 支持的File 的操作不仅仅是文件的选择,</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>在HTML5 之前需要使用 Applet 和 SilverLight 才能达到的文件拖拽功能,在HTML5 中也能轻松的实现,</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>看代码:</p><pre style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”><pre style="line-height: 1.42857; border: 0px; border-radius: 0px; background: transparent;"><div id="LC1" class="line"><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”></div><div id="LC2" class="line"><html></div><div id="LC3" class="line"> <head></div><div id="LC4" class="line"> <meta http-equiv=”content-type” content=”text/html; charset=utf-8”></div><div id="LC5" class="line"> <meta name=”author” content=”oscar999”></div><div id="LC6" class="line"> <title></title></div><div id="LC7" class="line"> </head></div><div id="LC8" class="line"> <body></div><div id="LC9" class="line"> <div id=”dropbox”> Drop Here </div></div><div id="LC10" class="line"> <div id=”filecontent”></div></div><div id="LC11" class="line"> <script></div><div id="LC12" class="line"> var dropbox = document.getElementById(“dropbox”); </div><div id="LC13" class="line"> dropbox.addEventListener(“dragenter”, dragenter, false); </div><div id="LC14" class="line"> dropbox.addEventListener(“dragover”, dragover, false); </div><div id="LC15" class="line"> dropbox.addEventListener(“drop”, drop, false); </div><div id="LC16" class="line">
</div><div id="LC17" class="line"> function dragenter(e) { </div><div id="LC18" class="line"> e.stopPropagation(); </div><div id="LC19" class="line"> e.preventDefault(); </div><div id="LC20" class="line"> } </div><div id="LC21" class="line">
</div><div id="LC22" class="line"> function dragover(e) { </div><div id="LC23" class="line"> e.stopPropagation(); </div><div id="LC24" class="line"> e.preventDefault(); </div><div id="LC25" class="line"> }</div><div id="LC26" class="line">
</div><div id="LC27" class="line"> function drop(e) { </div><div id="LC28" class="line"> e.stopPropagation(); </div><div id="LC29" class="line"> e.preventDefault(); </div><div id="LC30" class="line"> var dt = e.dataTransfer; </div><div id="LC31" class="line"> var files = dt.files;</div><div id="LC32" class="line"> if(files.length)</div><div id="LC33" class="line"> {</div><div id="LC34" class="line"> var file = files[0];</div><div id="LC35" class="line"> var reader = new FileReader();</div><div id="LC36" class="line"> reader.onload = function()</div><div id="LC37" class="line"> {</div><div id="LC38" class="line"> document.getElementById(“filecontent”).innerHTML = this.result;</div><div id="LC39" class="line"> };</div><div id="LC40" class="line"> reader.readAsText(file);</div><div id="LC41" class="line"> }</div><div id="LC42" class="line"> } </div><div id="LC43" class="line"> </div><div id="LC44" class="line"> </script></div><div id="LC45" class="line"> </body></div><div id="LC46" class="line"></html></div></pre></pre><p><span style=”color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>这里通过事件对象的 dataTransfer 可以得到文件。</span><br style=”color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><h3 style="color: rgb(85, 85, 85); line-height: 35px; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(83, 142, 213);">读取文件内容
</h3><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>在第一个例子中, 我们使用 FileReader类来读取文件的内容,</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>在 W3C 草案中,File 对象只包含文件名,文件类型等只读属性;FileReader用于内容读取和监控读取状态。<br></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>(在firefox 中, 可以直接使用 var fileBinary = file.getAsBinary();  读取文件的二进制源码)<br></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>FileReader提供的方法包括:</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>1. readAsBinaryString</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>2. readAsDataURL</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>3. readAsText</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>4. abort</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>………</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>以下,举一个 使用 FileReader 将用户选择的图片不通过后台即时显示出来的例子。</p><pre style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”><pre style="line-height: 1.42857; border: 0px; border-radius: 0px; background: transparent;"><div id="LC1" class="line">function handleFiles(files){</div><div id="LC2" class="line"> for (var i = 0; i < files.length; i++) {</div><div id="LC3" class="line"> var file = files[i];</div><div id="LC4" class="line"> var imageType = /image.*/;</div><div id="LC5" class="line"> </div><div id="LC6" class="line"> if (!file.type.match(imageType)) {</div><div id="LC7" class="line"> continue;</div><div id="LC8" class="line"> }</div><div id="LC9" class="line"> </div><div id="LC10" class="line"> var img = document.createElement(“img”);</div><div id="LC11" class="line"> img.classList.add(“obj”);</div><div id="LC12" class="line"> img.file = file;</div><div id="LC13" class="line"> preview.appendChild(img);</div><div id="LC14" class="line"> </div><div id="LC15" class="line"> var reader = new FileReader();</div><div id="LC16" class="line"> reader.onload = (function(aImg){</div><div id="LC17" class="line"> return function(e){</div><div id="LC18" class="line"> aImg.src = e.target.result;</div><div id="LC19" class="line"> };</div><div id="LC20" class="line"> })(img);</div><div id="LC21" class="line"> reader.readAsDataURL(file);</div><div id="LC22" class="line"> }</div><div id="LC23" class="line">}</div></pre></pre><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”></p><h3 style="color: rgb(85, 85, 85); line-height: 35px; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(83, 142, 213);">同后端的交互
</h3><p><span style=”color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>在一般的HTML  中,使用方式是把file input 放在form 中, 以POST 方式把文件传递到后端。</span></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>在 HTML5 中, 也可以通过 FileReader 的 readAsBinaryString 方法读取到文件的二进制码,然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去。</p><pre style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”><div id=”LC1” class=”line” style=”color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, “Courier New”, monospace; font-size: 13px; line-height: 18.5714px; background-color: rgb(249, 249, 249);”>var xhr = new XMLHttpRequest();</div><div id=”LC2” class=”line” style=”color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, “Courier New”, monospace; font-size: 13px; line-height: 18.5714px; background-color: rgb(249, 249, 249);”>xhr.open(“POST”, “url”);</div><div id=”LC3” class=”line” style=”color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, “Courier New”, monospace; font-size: 13px; line-height: 18.5714px; background-color: rgb(249, 249, 249);”>xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary’);</div><div id=”LC4” class=”line” style=”color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, “Courier New”, monospace; font-size: 13px; line-height: 18.5714px; background-color: rgb(249, 249, 249);”><pre class=“sh_javascript sh_sourceCode”>xhr<span class=“sh_symbol”>.</span><span class=”sh_function”>sendAsBinary</span><span class=”sh_symbol”>(</span>binaryString<span class=”sh_symbol”>);</span></div></pre><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><h3 style="color: rgb(85, 85, 85); line-height: 35px; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(83, 142, 213);">参考</span></h3><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”></p><ul style=”color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”><li>W3C File API</li><li>MDC File</li></ul><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”></p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>
</p><p style=”margin-bottom: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”></p><h3 style="color: rgb(85, 85, 85); line-height: 35px; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(83, 142, 213);">浏览器支持</span>
</h3><p><span style=”color: rgb(85, 85, 85); font-family: “microsoft yahei”; font-size: 15px; line-height: 35px;”>适用于 Firefox 3.6+ ,Chrome ,部分适用于其他支持 HTML 5 接口的浏览器,完全不适用于 IE8 及以下版本</span>
</p>