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

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

File - 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。
FileList - File 对象的类数组序列（考虑 <input type="file" multiple> 或者从桌面拖动目录或文件）。
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();//addevt.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, '</strong> (', f.type || 'n/a', ') - ',f.size, ' bytes, last modified: ',f.lastModifiedDate.toLocaleDateString(),'<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', handleFileSelect, 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();//addevt.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, '</strong> (', f.type || 'n/a', ') - ',f.size, ' bytes, last modified: ',f.lastModifiedDate.toLocaleDateString(),'<div id="progressNumber', i, '" style="float:right">', '</div>','</li>');}document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';}folderInput.addEventListener('change', handleFileSelect, 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 读取文件

Html5 文件上传相关推荐

html5文档样式,jQuery HTML5文件上传美化插件jQuery.filer
插件描述:jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文 ...
html5支持ajax和jQuery吗,使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery)...
使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery) 诚然,Stack Overflow上有类似的问题,但似乎并 ...
HTML5文件上传域的小例子
先上图文件上传进度条.获取上传的文件信息.读取图片绑定到img元素之类的代码 <!DOCTYPE html><html> <head><meta char ...
纯HTML5文件上传
Pure HTML5 file upload HTML5 upload tutorial: today we will develop a great HTML5 file upload form w ...
php处理html5文件上传代码,HTML5中文件上传的代码
这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助.XHR2上传二进制文件 html代码: javascript代码:functi ...
从实战中学前端：打造自己的 html5 文件上传插件
文件上传初体验  <input type="file" id="logo" name=&qu ...
HTML5 文件上传的2种方式
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/71421123 以前上传文件需要提交Form表单. HTML5方式上传文件,可以通过使用 ...
HTML5 : 文件上传下载
网站建设中,文件上传与下载在所难免,HTML5中提供的API在前端有着丰富的应用,完美的解决了各个浏览器的兼容性问题,所以赶紧get吧! FileList 对象和 file 对象 HTML 中的 in ...
jQuery HTML5文件上传美化插件jQuery.filer
下载及详情参考jquery插件库:http://www.jq22.com/jquery-info11363 1.介绍和配置参数更多配置参数前往 jquery插件库 2.引入 css 和 ...

Html5 文件上传

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

使用上传按钮上传文件

拖拽的方式上传文件

使用按钮上传目录

Html5 文件上传相关推荐

最新文章

热门文章