html5拖拽菜鸟,HTML 5拖拽预览

本文用到的知识

HTML5中的File及FileReader接口

相关资料：

运行效果

注：大家把自己电脑上的图片或txt文件拖到上面的DIV中即可看到效果

源码

html>

HTML5文件拖拽预览Demo

h1{

padding:0px;

margin:0px;

}

div#show{

border: 1px solid #ccc;

width: 400px;

height: 300px;

display: -moz-box;

display: -webkit-box;

-moz-box-align: center;

-webkit-box-align: center;

-moz-box-pack: center;

-webkit-box-pack: center;

resize:both;

overflow:auto;

}

div[id^=show]:hover{

border: 1px solid #333;

}

div#main{

width:100%;

}

div#successLabel

{

color:Red;

}

div#content

{

display:none;

}

function init()

{

vardest=document.getElementById("show");

dest.addEventListener("dragover", function(ev)

{

ev.stopPropagation();

ev.preventDefault();

}, false);

dest.addEventListener("dragend", function(ev)

{

ev.stopPropagation();

ev.preventDefault();

}, false);

dest.addEventListener("drop", function (ev) {

ev.stopPropagation();

ev.preventDefault();

varfile=ev.dataTransfer.files[0];

varreader=newFileReader();

if (file.type.substr(0, 5) == "image") {

reader.οnlοad=function(event) {

dest.style.background='url('+ event.target.result + ') no-repeat center';

dest.innerHTML="";

};

reader.readAsDataURL(file);

}

else if (file.type.substr(0, 4) == "text") {

reader.readAsText(file);

reader.οnlοad=function(f) {

dest.innerHTML="

"+ this.result + "

";

dest.style.background="white";

}

}

else {

dest.innerHTML="暂不支持此类文件的预览";

dest.style.background="white";

}

}, false);

}

//设置页面属性，不执行默认处理(拒绝被拖放)

document.οndragοver=function(e){e.preventDefault();};

document.οndrοp=function(e){e.preventDefault();}

window.οnlοad=init;

HTML5文件拖拽预览Demo

文件预览区，仅限图片和txt文件