html5文件-上传

最新推荐文章于 2022-08-25 18:08:11 发布

我家小宝_朱朱

最新推荐文章于 2022-08-25 18:08:11 发布

阅读量446

点赞数

分类专栏： html5-文件上传

html5-文件上传专栏收录该内容

3 篇文章 0 订阅

订阅专栏

转： http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html

1. 表单输入触发change事件

表单提交文件是最常见的场景，用户选择文件后，触发了文件选择框的change事件，通过访问文件选择框元素的files属性可以拿到选定的文件列表。

如果文件选择框指定了multiple，则一个文件选择框可以同时选择多个文件，files包含了所有选择的文件对象；如果没有指定，则只能选择一个文件，files[0]就是所选择的文件对象。

function fileSelect1(e) {
    var files = this.files;
    for(var i = 0, len = files.length; i < len; i++) {
        var f = files[i];
        html.push(
            '<p>',
                f.name + '(' + (f.type || "n/a") + ')' + ' - ' + f.size + 'bytes',
            '</p>'
        );
    }
    document.getElementById('list1').innerHTML = html.join('');  //文件对象的属性 name size type
}

<input type="file" id="file1" multiple/>

document.getElementById('file1').onchange = fileSelect1;

或者

$("#file1").change(function(e){

//获取文件对象

e.target.files

或者

this.files

})

2. 拖拽 + 预览（html5拖拽和预览）

<body>
<div><input type="file" id="fileinput" multiple style="display:none;"/></div>
<div id="dragdiv" class="dragarea">
</div>
<div id="preInput"></div>
<script src="../js/libs/jquery-1.11.3.js">
</script>
<script>
//readAsDataURL
if(typeof FileReader == 'undefined'){
alert("你的浏览器不支持FileReader接口");
}

var dragOverHandler = function (ev) {
ev.stopPropagation();
ev.preventDefault();
return true;
}

var dropHandler = function(ev){
ev.stopPropagation();
ev.preventDefault();
//显示图片
var files = ev.dataTransfer.files;
for(var i=0;i<files.length;i++){
var fileReader = new FileReader();
fileReader.readAsDataURL(files[i]);
fileReader.onload = function(e){
var html = '<img src='+this.result+' />';
$("#preInput").append($(html));
}

}
}

var drag = document.getElementById('dragdiv');
drag.addEventListener('drop', dropHandler, false);
drag.addEventListener('dragover', dragOverHandler, false);
</script>

3.分段读取文件

HTML5 File Api提供了一个slice方法，允许分片读取文件内容。

function readBlob(start, end) {
    var files = document.getElementById('file5').files;

    if(!files.length) {
        alert('请选择文件');
        return false;
    }

    var file = files[0],
        start = parseInt(start, 10) || 0,
        end = parseInt(end, 10) || (file.size - 1);

    var r = document.getElementById('range'),
        c = document.getElementById('content');

    var reader = new FileReader();
    reader.onloadend = function(e) {
        if(this.readyState == FileReader.DONE) {
            c.textContent = this.result;
            r.textContent = "Read bytes: " + (start + 1) + " - " + (end + 1) + " of " + file.size + " bytes";
        }
    };

    var blob;
    if(file.webkitSlice) {
        blob = file.webkitSlice(start, end + 1);
    } else if(file.mozSlice) {
        blob = file.mozSlice(start, end + 1);
    } else if(file.slice) {
        blob = file.slice(start, end + 1);
    }

    reader.readAsBinaryString(blob);
};
document.getElementById('file5').onchange = function() {
    readBlob(10, 100);
}

分段读取进度

那分段读取一个大文件时，如何监控整个文件的读取进度呢？

这种情况下，因为我们调用了多次FileReader的文件读取方法，跟上文一次性把一个文件读到内存中的情况不大相同，不能用onprogress来监控。

我们可以监听onload事件，每次onload代表每个片段读取完毕，我们只需要在onload中计算已读取的百分比就可以了！

var bar2 = document.getElementById('progress-bar2');
var progress2 = document.getElementById('progress2');
var input6 = document.getElementById('file6');
var block = 1 * 1024 * 1024; // 每次读取1M
// 当前文件对象
var file;
// 当前已读取大小
var fileLoaded;
// 文件总大小
var fileSize;

// 每次读取一个block
function readBlob2() {
    var blob;
    if(file.webkitSlice) {
        blob = file.webkitSlice(fileLoaded, fileLoaded + block + 1);
    } else if(file.mozSlice) {
        blob = file.mozSlice(fileLoaded, fileLoaded + block + 1);
    } else if(file.slice) {
        blob = file.slice(fileLoaded, fileLoaded + block + 1);
    } else {
        alert('不支持分段读取！');
        return false;
    }
    reader.readAsBinaryString(blob);
}
// 每个blob读取完毕时调用
function loadHandler2(e) {
   fileLoaded += e.total;
   var percent = fileLoaded / fileSize;
   if(percent < 1)  {
       // 继续读取下一块
       readBlob2();
   } else {
       // 结束
       percent = 1;
   }
   percent = Math.ceil(percent * 100) + '%';
   progress2.innerHTML = percent;
   progress2.style.width = percent;
}
function fileSelect6(e) {
    file = this.files[0];
    if(!file) {
        alert('文件不能为空！');
        return false;
    }
    fileLoaded = 0;
    fileSize = file.size;
    bar2.style.display = 'block';
    // 开始读取
    readBlob2();
}
var reader = new FileReader();
// 只需监听onload事件
reader.onload = loadHandler2;
input6.onchange = fileSelect6