HTML5实现拖拽读取图片文件（将电脑中图片拖入浏览器并显示）-百分百源码网

HTML5实现拖拽读取图片文件（将电脑中图片拖入浏览器并显示）

发布时间：01/15 来源：浏览：关键词：

直接把文件拖到浏览器或html5页面中实现浏览了，今天我们来看一个这样的例子的实现方法了，具体的就一起来看看，希望这篇教程能够为各位带来帮助哦。

下面样例演示上传图片预览功能。图片的选择，除了可以使用文件上传控件选择图片，也可以直接把图片拖放到虚线框中。

1，实现原理

（1）为了处理放置文件的操作，需要处理三个事件：ondragenter、ondragover和ondrop。

（2）处理图片用的是 readAsDataURL() 方法，其得到的数据URL是一种用长字符串表示图片的方式。为了在网页中显示图片，可以将 <img> 元素的src属性设置为图片URL，也可也将CSS的 background-image 属性设置为图片URL（本例采用此方式）

（3）这里将显示图片的<div>的 background-size 设为100%，为了缩小图片以全部显示。并将 background-repeat 设为 no-repeat，不让图片重复显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Read Image</title>
  <style>
    #dropBox {
      margin: 15px;
      width: 250px;
      height: 250px;
      border: 5px dashed gray;
      border-radius: 8px;
      background: lightyellow;
      background-size: 100%;
      background-repeat: no-repeat;
      text-align: center;
    }

    #dropBox div {
      margin: 75px 45px;
      color: orange;
      font-size: 25px;
      font-family: Verdana, Arial, sans-serif;
    }

    input {
      margin: 15px;
    }
  </style>

  <script>
    var dropBox;

    window.onload = function() {
      dropBox = document.getElementById("dropBox");
      dropBox.ondragenter = ignoreDrag;
      dropBox.ondragover = ignoreDrag;
      dropBox.ondrop = drop;
    }

    function ignoreDrag(e) {
      //因为我们在处理拖放，所以应该确保没有其他元素会取得这个事件
      e.stopPropagation();
      e.preventDefault();
    }

    function drop(e) {
      //取消事件传播及默认行为
      e.stopPropagation();
      e.preventDefault();

      //取得拖进来的文件
      var data = e.dataTransfer;
      var files = data.files;
      //将其传给真正的处理文件的函数
      processFiles(files);
    }

    function processFiles(files) {
      var file = files[0];
      var output = document.getElementById("fileOutput");
      //创建FileReader
      var reader = new FileReader();
      //告诉它在准备好数据之后做什么
      reader.onload = function (e) {
        //使用图像URL来绘制dropBox的背景
        dropBox.style.backgroundImage = "url('" + e.target.result + "')";
      };
      //读取图片
      reader.readAsDataURL(file);
    }

    function showFileInput() {
      var fileInput = document.getElementById("fileInput");
      fileInput.click();
    }
  </script>
</head>

<body>
    <div id="dropBox">
      <div>将图片拖放到此处...</div>
    </div>
    <input id="fileInput" type="file" onchange="processFiles(this.files)">
    <img id="thumbnail">
</body>
</html>