FileReader (三) － 网页拖拽并预显示图片简单实现
生活随笔
收集整理的這篇文章主要介紹了
FileReader (三) － 网页拖拽并预显示图片简单实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以下是一個很賤很簡單的一個 在網頁上圖拽圖片并預顯示的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="width:300px; height:300px; background-color:#0FF"> </div> <div id="preview" style="width: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>轉載于:https://www.cnblogs.com/Gile/p/3693239.html
總結
以上是生活随笔為你收集整理的FileReader (三) － 网页拖拽并预显示图片简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 课程设计一总结
- 下一篇： MFC DLL对话框调用