FileReader (三) － 网页拖拽并预显示图片简单实现
生活随笔
收集整理的這篇文章主要介紹了
FileReader (三) － 网页拖拽并预显示图片简单实现
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
以下是一個(gè)很賤很簡(jiǎn)單的一個(gè) 在網(wǎng)頁(yè)上圖拽圖片并預(yù)顯示的demo。
我是從https://developer.mozilla.org/en-US/docs/Web/API/FileReader#State_constants?里面學(xué)到的一點(diǎn)點(diǎn)點(diǎn)點(diǎn)點(diǎn)皮毛。 建議大家參考。
很粗糙的實(shí)現(xiàn)，對(duì)不住了。
上部分藍(lán)色區(qū)域： 拖拽區(qū)域
下部分黃色區(qū)域： 預(yù)顯示區(qū)域
<!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>轉(zhuǎn)載于:https://www.cnblogs.com/Gile/p/3693239.html
總結(jié)
以上是生活随笔為你收集整理的FileReader (三) － 网页拖拽并预显示图片简单实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 课程设计一总结
- 下一篇： MFC DLL对话框调用