H5文件操作api--持续完善中

最新推荐文章于 2024-03-17 09:46:09 发布

转载最新推荐文章于 2024-03-17 09:46:09 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/-maomao/p/6164626.html

文章标签：

#c#

本文介绍了一种使用HTML5的拖放API和FileReader API实现的文件上传和读取方法。用户可以通过拖放文件到指定区域或点击选择文件进行上传，支持浏览器实时预览文件内容。

Drop Here

<input type="file" onchange="upload(this)" /></p>
<div id="dropbox" style="height: 100px; width: 100px; border: 1px solid black;">Drop Here</div>
<div id="filecontent"></div>

function upload(myfile) { 
var file = myfile.files[0];
 if (window.FileReader) {
 var fr = new FileReader(); 
 fr.readAsText(file, "gb2312");
 fr.onload = function (e) { 
 document.getElementById("filecontent").innerHTML = this.result; 
  } 
 }
 else { 
 alert("Not supported by your browser!"); 
 }
} 

var dropbox = document.getElementById("dropbox"); 
dropbox.addEventListener("dragenter", dragenter, false); 
dropbox.addEventListener("dragover", dragover, false); 
dropbox.addEventListener("drop", drop, false);
function dragenter(e) { 
 e.stopPropagation(); 
 e.preventDefault(); 
} 
function dragover(e) {
 e.stopPropagation();
 e.preventDefault(); 
}
function drop(e) { 
 e.stopPropagation();
 e.preventDefault();
var dt = e.dataTransfer; 
var files = dt.files;
if (files.length) {
 var file = files[0]; 
 var fr = new FileReader(); 
 fr.onload = function () { 
 document.getElementById("filecontent").innerHTML = this.result; 
  };
 fr.readAsText(file, "gb2312");
 }
}