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, '</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();
        //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, '</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 读取文件

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lzx_2011/article/details/52712593
个人分类: Front-end
上一篇Mysql——index(索引)使用
下一篇HTTP中GET与POST的区别
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭