HTML5拖拽預覽單張圖片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽預覽單張圖片</title> <style type="text/css"> *{ margin: 0; } ul li{ list-style: none; } .drag{ width: 200px; height: 200px; border: 1px solid #666; text-align: center; line-height: 200px; } </style> </head> <body> <div class="drag"> 檔案放這裡 </div> <ul id="view"> </ul> <script type="text/javascript"> var oDrag = document.getElementsByTagName("div")[0]; var oView = document.getElementById("view"); var obj = {}; //1. 檔案進入 oDrag.ondragenter = function(){ this.innerHTML = "可以釋放了" } //2. 在元素上面 oDrag.ondragover = function(e){ //阻止預設事件 e.preventDefault(); } //2. 釋放檔案 oDrag.ondrop = function(e){ e.preventDefault(); var fs = e.dataTransfer.files; //獲取檔案 var reader = new FileReader(); reader.readAsDataURL(fs[0]); reader.onload = function(){ if(!obj[this.result]){ //建立標籤 var oLi = document.createElement("li"); var oImg = document.createElement("img"); oImg.src = this.result; oLi.appendChild(oImg); oView.appendChild(oLi); obj[this.result] = this.result }else{ alert("不要重複提交") } } } </script> </body> </html>