<!doctype html> <html> <head> <Meta charset="utf-8"> <title>html5实战</title> <style> progress{} #output{position: absolute; top: 100px; right: 100px; width: 400px; height: 300px; background: green;} #drop{width: 200px; height: 150px; border:1px solid #000;} </style> <script> window.onload=function(){ var file = document.querySelector('#file-list'); var progress = document.querySelector('#progress'); var output = document.querySelector('#output'); var width= output.offsetWidth; var height = output.offsetHeight; //拖放文件事件 var drop = document.querySelector('#drop'); function dropHandle (event) { event.preventDefault(); var info=''; var data=null; var xhr=null; if(event.type=='drop'){ var files = event.dataTransfer.files; var len = files.length; data = new FormData(); for(var i=0; i<len;i++){ data.append('file'+i,files[i]); info+= files[i].name +'('+ files[i].size +'bytes'+')<br>' } xhr = new XMLHttpRequest(); xhr.open('post','http://www.baidu.com',true); xhr.onreadystatechange=function(){ if(xhr.status==200 && xhr.readyState==4){ alert(xhr.responseText) } } xhr.send(); } drop.innerHTML = info; } drop.addEventListener('drop',dropHandle,false); drop.addEventListener('dragenter',false); drop.addEventListener('dragover',false); file.addEventListener('change',function(event){ progress.value = 0; var files = this.files; //console.dir(files); // name size type lastModified var imageType=/image.*/; for(var i=0;i<files.length;i++){ var file = files[i]; var type = 'default'; var reader = new FileReader(); var blob = null; if (imageType.test(file.type)) { if(window.URL){ //这个可以取得图片地址 url = window.URL.createObjectURL(file) } reader.readAsDataURL(file); type = 'image'; }else{ //只读部分内容,slice,mozSlice; if(file.slice){ //0起始字节,5要读取字节数..JS里,一个字母为一字节,汉字为两字节 blob = file.slice(0,5); }else if(file.mozSlice){ blob = file.mozSlice(0,5); }else{ blob = file.webkitSlice(0,5); } reader.readAsText(blob); // reader.readAsText(file); type='text'; } reader.onprogress=function(ev){ if (ev.lengthComputable) { progress.value = 100*ev.loaded/ev.total; } } reader.onload=function(ev){ if (ev.lengthComputable) { progress.value = 100*ev.loaded/ev.total; } var html=''; switch(type){ case 'image': // URL 与 reader.result 作用一样,释放内存:window.URL.revokeObjectURL(url) if(url){ alert(0) html = '<img src='+url+' width="'+width+'" height="'+height+'"/>'; }else{ html = '<img src='+reader.result+' width="'+width+'" height="'+height+'"/>'; } break; case 'text': html = reader.result; break; } output.innerHTML = html; } reader.onerror=function(){ output.innerHTML='Could not read file,error code is '+ reader.error.code; } //console.dir(file); } },false) } </script> </head> <body> <div id="container"> <input type="file" id="file-list" /> <progress id="progress" value ="1" max="100"></progress> <div id="drop">把文件拖进这里</div> </div> <div id="output"></div> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。