Html5 文件上传

拖拽目录只有chrome11及以后版本才支持，也可直接看参考文献中的文章，本文主要记录自己做过的一些东西
这有个简单的 html5 上传demo：https://github.com/xiaoshenge/html5demo/blob/master/file/js/list.js

HTML5 提供了一种通过 File API 规范与本地文件交互的标准方式。为了举例说明其功能，可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览，或者允许应用程序在用户离线时保存文件引用。另外，可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配，或者限制上传内容的大小。
该规范通过“本地”文件系统提供了多种文件访问接口：

1. File - 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。
2. FileList - File 对象的类数组序列（考虑 <input type="file" multiple> 或者从桌面拖动目录或文件）。
3. Blob - 可将文件分割为字节范围。

与以上数据结构结合使用时，FileReader 接口可用于通过熟悉的 JavaScript 事件处理来异步读取文件。因此，可以监控读取进度、找出错误并确定加载何时完成。这些 API 与 XMLHttpRequest 的事件模型有很多相似之处。

判断浏览器是否完全支持 File API

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

使用上传按钮上传文件

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script type="text/javascript"> function handleFileSelect(evt) { var files = evt.target.files; var output = []; for (var i = 0,f; f = files[i]; i++) { output.push('<li><strong>',escape(f.name),'</strong> (',f.type || 'n/a',') - ',f.size,' bytes,last modified: ',f.lastModifiedDate.toLocaleDateString(),'</li>'); } document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; } document.getElementById('files').addEventListener('change',handleFileSelect,false); </script>

拖拽的方式上传文件

<div class="example">
    <div id="drop_zone">将文件拖放到此处</div>
    <output id="list"></output>
</div>

<script type="text/javascript"> var fileList = null; //传输的文件 function handleFileSelect(evt) { evt.stopPropagation(); evt.preventDefault(); //add evt.target.className = (evt.type == "dragover" ? "hover" : ""); fileList = evt.target.files || evt.dataTransfer.files; // FileList object. //console.log(evt); //console.log(fileList); // files is a FileList of File objects. List some properties. var output = []; for (var i = 0,f; f = fileList[i]; i++) { if (!f.name.startsWith('.')) { console.log(f); } output.push('<li><strong>',f.name,'<div id="progressNumber',i,'" style="float:right">','</div>','</li>'); } document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; } function handleDragOver(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. } // Setup the dnd listeners. var dropZone = document.getElementById('drop_zone'); dropZone.addEventListener('dragover',handleDragOver,false); dropZone.addEventListener('drop',false); </script>

这个也可以上传目录，不过目前只有chrome11及以后版本支持

使用按钮上传目录

<div id="addfilediv">
    <label class="addfolder">
        <input type="file" id="folderInput" multiple="true" webkitdirectory="true" directory="true" style="top: -0.5px; left: -40px; " />
    </label>
    <lable id="notice">*上传目录</lable>
</div>

<script type="text/javascript"> var fileList = null; //传输的文件 var folderInput = document.getElementById('folderInput'); function handleFileSelect(evt) { evt.stopPropagation(); evt.preventDefault(); //add evt.target.className = (evt.type == "dragover" ? "hover" : ""); fileList = evt.target.files || evt.dataTransfer.files; // FileList object. //console.log(evt); //console.log(fileList); // files is a FileList of File objects. List some properties. var output = []; for (var i = 0,'</li>'); } document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; } folderInput.addEventListener('change',false); </script>

当获取了 File 引用后，实例化 FileReader 对象，以便将其内容读取到内存中。加载结束后，将触发读取程序的 onload 事件，而其 result 属性可用于访问文件数据。
FileReader 读取文件：
FileReader.readAsBinaryString(Blob|File) - result 属性将包含二进制字符串形式的 file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。

对 FileReader 对象调用其中某一种读取方法后，可使用 onloadstart、onprogress、onload、onabort、onerror 和 onloadend 跟踪其进度。

[参考文献]

通过 File API 使用 JavaScript 读取文件