html5文件-上传
来源:互联网 发布:淘宝的企业店铺怎么开 编辑:程序博客网 时间:2024/05/29 03:00
转: 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
})
<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;// 每次读取一个blockfunction 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
- html5图片上传【文件上传】
- HTML5文件上传
- html5 java 文件上传
- HTML5 文件上传
- HTML5 异步上传文件
- html5 进度条上传文件
- html5---上传文件
- html5 文件上传预览
- HTML5 文件上传示例
- html5 自定义文件上传
- html5异步上传文件
- html5 ajax文件上传
- HTML5文件上传
- html5 自定义文件上传
- html5 ajax文件上传
- html5多文件上传
- html5文件-上传
- Html5 文件上传
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用
- Mac终端常用命令
- [C#]获取IP地址以及获取地址
- hdu 5733 tetrahedron(2016 Multi-University Training Contest 1——几何公式题)
- NIO学习笔记一
- html5文件-上传
- windows下qt5使用ffmpeg(不用编译源码)
- 【NGUI】记录button的动态效果
- 关于苹果推送和证书
- Ubuntu SDK 安装
- Network 【HTTPS请求/AFN】
- Ubuntu SDK 安装
- Vector用法详解
- Dll注入经典方法完整版