html5实现拖拽上传

<html>
<
head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5拖拽上传</title> <style type="text/css"> #div1{ margin: 0 auto; width:200px; height:200px; background:#ccc; color: white;} #div1 p{ position: relative; top: 90px; left: 50px; } li{ width:200px; height:200px; margin:5px; float:left; list-style:none;} li img{ width:500px;height: auto} </style> <script type="text/javascript"> window.onload = function(){ var oUl = document.getElementById('ul1'); var oDiv = document.getElementById('div1'); oDiv.ondragenter = function(){ this.innerHTML = '可以释放'; }; oDiv.ondragover = function(ev){ ev.preventDefault(); }; oDiv.ondragleave = function(){ this.innerHTML = '请拖拽到此区域'; }; oDiv.ondrop = function(ev){ ev.preventDefault(); var fs = ev.dataTransfer.files; for(var i=0;i<fs.length;i++){ var fr = new FileReader(); if( fs[i].type.indexOf('image')!=-1 ){ fr.readAsDataURL( fs[i] ); fr.onload = function(){ var oLi = document.createElement('li'); var oImg = document.createElement('img'); oImg.src = this.result; oLi.appendChild( oImg ); oUl.appendChild( oLi ); }; } else{ alert('亲,请拖拽图片格式'); } } }; }; </script> </head> <body> <div id="div1"><p>请拖拽到此区域</p></div> <ul id="ul1"></ul> </body>
</html>

 

posted @ 2017-04-21 12:24  贺小鸣  阅读(912)  评论(0编辑  收藏  举报
为尊重他人劳动成果,转载/摘抄请标明来源!