HTML5编程实战之三-图片文本(txt)拖拽预览实现代码

来源：动视网责编：小采时间：2020-11-27 15:10:07

HTML5编程实战之三-图片文本(txt)拖拽预览实现代码

HTML5编程实战之三-图片文本(txt)拖拽预览实现代码:本文主要用到的知识 http://www.gxlcms.com/wiki/1118.html target=_blank

推荐度：

点击下载本文 文档为doc格式

导读HTML5编程实战之三-图片文本(txt)拖拽预览实现代码:本文主要用到的知识 http://www.gxlcms.com/wiki/1118.html target=_blank

本文主要用到的知识

　　http://www.gxlcms.com/wiki/1118.html" target="_blank">HTML5中的File及FileReader接口

源码

<!DOCTYPE html><html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>HTML5文件拖拽预览Demo</title>
 <style type="text/css">
 h1{
 padding:0px;
 margin:0px;
 }
 p#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;
 }
 p[id^=show]:hover{
 border: 1px solid #333; 
 }
 p#main{
 width:100%;
 }
 p#successLabel {
 color:Red;
 }
 p#content {
 display:none;
 }
 </style>
 <script type="text/javascript">
 function init() 
 { var dest = 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(); 
 var file = ev.dataTransfer.files[0]; 
 var reader = new FileReader(); 
 if (file.type.substr(0, 5) == "image") {
 reader.onload = 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.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>
 <p id="show">
 文件预览区，仅限图片和txt文件 
 </p></body></html>