zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    2.18周四笔记
    Tkinter 控件详细介绍
    python基础: day4作业计算器
    Python的functools.reduce用法
    正则表达式技术深入
    递归
    生成器generator
    绕过验证码
    导入JSONPathExtractorExample.jmx文件报错,导不进去
    jmeter一些插件下载网址
  • 原文地址:https://www.cnblogs.com/Gile/p/3693239.html
Copyright © 2011-2022 走看看