您的位置:首页 > Web前端 > HTML5

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

2016-12-12 15:20 218 查看
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");
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: