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="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>

FileReader (三) － 网页拖拽并预显示图片简单实现

FileReader (三) －网页拖拽并预显示图片简单实现