JS HTML5拖拽上传图片预览完整教程

HTML5拖拽API与文件处理基础

本文分享了一段利用JavaScript和HTML5技术实现图片拖拽上传及本地预览的完整代码示例，供开发者参考与实践。

1. 文件API（File API）

在HTML5中，通过file类型的表单控件选择的每一个文件都对应一个File对象。FileList对象则是这些File对象的集合，代表了用户选择的所有文件列表。File对象继承自Blob对象，该对象表示二进制原始数据，并提供slice方法以访问字节内部的原始数据块。简而言之，FileList包含File对象，而File对象继承自Blob对象。

各相关对象的属性与关系如下：

HTML5拖拽API与文件处理基础

FileReader接口：如图所示，HTML5还提供了FileReader接口，主要用于将文件读取到内存中，并获取文件数据。

var reader=new FileReader();

该接口包含四个方法和六个事件： • readAsBinaryString(file)：将文件读取为二进制字符串。 • readAsDataURL(file)：将文件读取为Data URL格式。 • readAsText(file,[encoding])：将文件读取为文本，可指定编码。 • abort()：中断当前的文件读取操作。 -------------------------------------------------------------------------------- • onabort：当读取操作被中断时触发。 • onerror：当读取操作发生错误时触发。 • onloadstart：当读取操作开始时触发。 • onprogress：在读取文件过程中持续触发。 • onload：当读取操作成功完成时触发。 • onloadend：当读取操作结束时触发，无论成功还是失败。上述事件参数e中，可通过e.target.result或this.result获取读取到的结果。

2. 拖放API

拖放属性：需将需要被拖放的元素的draggable属性设置为true（即draggable="true"）。需要注意的是，img元素和a元素默认支持拖放。

拖放事件：主要分为拖放源元素事件和目标元素事件两类。

拖放源元素事件： • dragstart：在拖拽动作开始前触发。 • drag：在拖拽开始到结束之间，连续触发。 • dragend：在拖拽动作结束时触发。目标元素事件： • dragenter：当拖放元素进入目标元素区域时触发。 • dragover：当拖放元素在目标元素区域内移动时，连续触发。 • dragleave：当拖放元素离开目标元素区域时触发。 • drop：在目标元素上释放鼠标时触发。需要注意的是，在目标元素的dragover和drop事件中必须阻止默认行为（调用preventDefault），否则拖放操作将无法实现。

-----------------------------

DataTransfer对象：专门用于存放拖放过程中携带的数据，可将其设置为拖放事件的dataTransfer属性。

包含3个属性： • effectAllowed：设置光标样式（可选值包括none, copy, copyLink, copyMove, link, linkMove, move, all和uninitialized）。 • dropEffect：设置拖放操作的视觉效果。 • types：存入数据的种类，是一个字符串类型的伪数组。 • files：获取外部拖拽的文件，返回一个FileList列表，FileList中的每个文件对象包含type属性，用于返回文件类型。包含4个方法： • setData()：设置数据，参数为key和value（必须是字符串）。 • getData()：根据key值获取对应的value。 • clearData()：清除DataTransfer对象中存放的数据。 • setDragImage(imageUrl, xOffset, yOffset)：使用img元素来设置拖放时的自定义图标。 //示例代码： target.addEventListener('dragstart',function(e){ var fs = e.dataTransfer.files;//获取拖放的文件对象列表FileList对象 var dt=e.dataTransfer;//作为拖放事件的dataTransfer属性 dt.effectAllowed='copy'; dt.setData('text/plain','hello'); dt.setDragImage(dragIcom,-10,-10); });

拖拽上传图片预览实现方案

3. 实现拖拽上传图片预览

实现思路： 1. 熟悉文件拖拽目标元素的四个事件，特别注意在ondragover和ondrop事件中需阻止默认行为。 2. 拖拽放置后，通过e.dataTransfer.files获取文件对象集合。 3. 遍历该集合中的每个文件对象，判断文件类型及大小，若符合指定类型则执行相应操作。 4. 实例化文件信息读取对象：new FileReader()，利用其readAsDataURL(文件对象)等方法将文件读取为Data URL。读取成功后触发onload事件，此时this.result即为读取到的数据。 5. 在FileReader对象的相关事件中进行相应的逻辑处理。

HTML结构：


<div class="container">
  <p class="text">请将图片文件拖拽至此区域！</p>
</div>

总加载数：<span id='total'>100</span>

jQuery代码实现：


<script type="text/javascript">
    $(function() {
      /*思路：
       *1.熟悉文件拖拽 目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为
       *2.拖拽放置后，获取到文件对象集合：e.dataTransfer.files
       *3.循环该集合中的每个文件对象，判断文件类型以及文件大小，是指定类型则进行相应的操作
       *4.读取文件信息对象：new FileReader()，它有读取文件对象为DataUrl等方法：readAsDataURL(文件对象)、读取成功之后触发的事件：onload事件等，this.result为读取到的数据
       *5.在FileReader对象中的几个事件中进行相应的逻辑处理
       *
       */

      //必须将jq对象转换为js对象，调用原生方法
      var oDiv = $(".container").get(0);
      var oP = $(".text");
      //进入
      oDiv.ondragenter = function() {
          oP.html('');
        }
        //移动，需要阻止默认行为，否则直接在本页面中显示文件
      oDiv.ondragover = function(e) {

          e.preventDefault();
        }
        //离开
      oDiv.onleave = function() {
          oP.html('请将图片文件拖拽至此区域！');
        }
        //拖拽放置，也需要阻止默认行为
      oDiv.ondrop = function(e) {

        e.preventDefault();
        //获取拖拽过来的对象,文件对象集合
        var fs = e.dataTransfer.files;
        //若为表单域中的file标签选中的文件，则使用form[表单name].files[0]来获取文件对象集合
        //打印长度
        console.log(fs.length);
        //循环多文件拖拽上传
        for (var i = 0; i < fs.length; i++) {
          //文件类型
          var _type = fs[i].type;

          console.log(_type);
          //判断文件类型
          if (_type.indexOf('image') != -1) {
            //文件大小控制
            console.log(fs[i].size);
            //读取文件对象
            var reader = new FileReader();
            //读为DataUrl,无返回值
            reader.readAsDataURL(fs[i]);
            reader.onloadstart = function(e) {
                //开始加载
              }
              // 这个事件在读取进行中定时触发
            reader.onprogress = function(e) {

              $("#total").html(e.total);
            }

            //当读取成功时触发，this.result为读取的文件数据
            reader.onload = function() {
                //文件数据
                // console.log(this.result);
                //添加文件预览
                var oImg = $("<img style='width:100px;' src='' />");
                oImg.attr("src", this.result);
                $(oDiv).append(oImg); //oDiv转换为js对象调用方法
              }
              //无论成功与否都会触发
            reader.onloadend = function() {
              if (reader.error) {
                console.log(reader.error);
              } else {
                //上传没有错误，ajax发送文件，上传二进制文件
              }
            }
          } else {
            alert('请上传图片文件！');
          }
        }

      }
    });
</script>

效果图展示：

HTML5拖拽API与文件处理基础

总结：结合拖放事件API、DataTransfer对象和文件读取对象FileList等知识，可以实现简易的拖拽上传图片预览效果。关键在于熟悉各对象的关系及用法，并明确实现思路。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

基于HTML5拖拽API实现图片上传与预览

HTML5拖拽API与文件处理基础

拖拽上传图片预览实现方案

实用工具推荐