以下是一个很贱很简单的一个 在网页上图拽图片并预显示的demo。
我是从https://developer.mozilla.org/en-US/docs/Web/API/FileReader#State_constants 里面学到的一点点点点点皮毛。 建议大家参考。
很粗糙的实现，对不住了。
上部分蓝色区域： 拖拽区域
下部分黄色区域： 预显示区域
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>File(s) size</title> </head> <body> <div id="dropbox" style="300px; height:300px; background-color:#0FF"> </div> <div id="preview" style="300px; height:300px; background-color:#FF0"> </div> <script> var dropbox ; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { // alert("enter"); e.stopPropagation(); e.preventDefault(); } function dragover(e) { // alert("over"); e.stopPropagation(); e.preventDefault(); } function drop(e) { // alert("drop"); e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /image.*/; if (!file.type.match(imageType)) { //alert("test"); continue; } var img = document.createElement("img"); var preview = document.getElementById("preview"); img.classList.add("obj"); img.file = file; preview.appendChild(img) var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; } )(img); reader.readAsDataURL(file); } } </script> </body> </html>