H5文件操作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");
 }
}

 

转载于:https://www.cnblogs.com/-maomao/p/6164626.html