本文用到的知识
HTML5中的File及FileReader接口
相关资料：
Using files from web applications
File API
运行效果
注：大家把自己电脑上的图片或txt文件拖到上面的DIV中即可看到效果
源码
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>HTML5文件拖拽预览Demo</title> <styletype="text/css"> h1{ padding:0px; margin:0px; } div#show{ border:1pxsolid#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:1pxsolid#333; } div#main{ width:100%; } div#successLabel { color:Red; } div#content { display:none; } </style> <scripttype="text/javascript"> functioninit() { 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.onload=function(event){ dest.style.background=’url(‘+event.target.result+’)no-repeatcenter’; dest.innerHTML=""; }; reader.readAsDataURL(file); } elseif(file.type.substr(0,4)=="text"){ reader.readAsText(file); reader.onload=function(f){ dest.innerHTML="<pre>"+this.result+"</pre>"; dest.style.background="white"; } } else{ dest.innerHTML="暂不支持此类文件的预览"; dest.style.background="white"; } },false); } //设置页面属性，不执行默认处理（拒绝被拖放） document.ondragover=function(e){e.preventDefault();}; document.ondrop=function(e){e.preventDefault();} window.onload=init; </script> </head> <body> <h1>HTML5文件拖拽预览Demo</h1> <divid="show"> 文件预览区，仅限图片和txt文件 </div> </body> </html>
主要代码解析
样式部分就不说了，很简单
dragover、dragend、drop是三个与拖拽相关的事件。
dragover表示被拖放的元素正在本元素范围内移动
dragend表示拖放操作结束
drop表示有其他元素被拖放到了本元素中
代码中先分别监听这几个事件，取消浏览器默认的行为，然后利用HTML5中的File及FileReader判断读取拖拽的文件。
如果文件是图片，就用FileReader的readAsDataURL方法将图片读取为DataURL字符串存入内存，并显示在DIV中。
如果文件是txt文本，就用FileReader的readAsText方法将文件读取为文本（默认为UTF-8格式），放到内存中，然后显示在DIV中。
每个人在他的人生发轫之初，总有一段时光，
