JS HTML5拖拽上传图片预览


Posted in Javascript onJuly 18, 2016

1.文件API:(File API)

file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件。file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块。总之,file对象包含与FlieList对象,而file对象继承于Blob对象!

各对象的相关属性关系:

JS HTML5拖拽上传图片预览

FileReader接口:
由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取文件中的数据。

var reader=new FileReader();

该接口总共有四个方法和六个事件:
 •readAsBinaryString(file):读取文件为二进制
 •readAsDataURL(file):读取文件DataURL
 •readAsText(file,[encoding]):读取文件为文本
 •about(none):中断文件读取 
--------------------------------------------------------------------------------
•onabort:读取文件中断时触发
 •onerror:读取文件出错时触发
 •onloadstart:读取文件开始时触发
 •onprogress:读取文件中时一直触发
 •onload:读取文件成功时触发
 •onloadend:读取文件结束时触发(成功和失败都会触发)
以上事件参数e有e.target.result或this.result指向读取的结果!

2.拖放API:

拖放属性:将需要拖放的元素的dragable属性设置为true(dragable=”true”)!img元素和a元素默认可以拖放。

拖放事件:(分为拖放元素事件和目标元素事件)

拖放元素事件:
 •dragstart:拖拽前触发
•drag ,拖拽前、拖拽结束之间,连续触发
 •dragend , 拖拽结束触发 
目标元素事件:
 •dragenter , 进入目标元素触发
 •dragover ,进入目标、离开目标之间,连续触发
 •dragleave , 离开目标元素触发
 •drop , 在目标元素上释放鼠标触发 
但是!需要注意的是:在目标元素中dragover和drop事件中要阻止默认行为(拒绝被拖放),否则拖放不能被实现!

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

DataTransfer对象:专门用于存放拖放时要携带的数据,可以被设置为拖放事件的dataTransfer属性。

3个属性:
 •effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
 •effectAllowed:设置拖放操作的视觉效果
 •types:存入数据的种类,字符串的伪数组
 •files:获取外部拖拽的文件,返回一个fileList列表,filesList下有个type属性,返回文件的类型 
4个方法:
 •setData() : 设置数据 key和value(必须是字符串)
 •getData() : 获取数据,根据key值,获取对应的value
 •clearData():清除DataTransfer对象存放的数据
 •setDragImage(imageUrl,log x,long y):用img元素来设置拖放图标
 
//示例:
target.addEventListener('dragstart',function(e){
    var fs = e.dataTransfer.files;//获取拖放的文件对象列表FlieList对象
    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(),它有读取文件对象为DataUrl等方法:readAsDataURL(文件对象)、读取成功之后触发的事件:onload事件等,this.result为读取到的数据
 5.在FileReader对象中的几个事件中进行相应的逻辑处理 

HTML:

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

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

JQ:

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

效果图:

JS HTML5拖拽上传图片预览

总结:结合拖放事件API,DataTransfer对象和文件读取对象FileList等方面的知识,实现简易拖拽上传图片预览效果。需要了解熟悉个对象的关系以及用法,明确好实现思路!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
原生js实现回复评论功能
Jan 18 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
jQuery 操作input中radio的技巧
Jul 18 #Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 #Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 #Javascript
浅析JavaScript中的array数组类型系统
Jul 18 #Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 #Javascript
javascript时间差插件分享
Jul 18 #Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 #Javascript
You might like
将数组写入txt文件 var_export
2009/04/21 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python入门篇之对象类型
2014/10/17 Python
python基础教程项目二之画幅好画
2018/04/02 Python
python psutil模块使用方法解析
2019/08/01 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
UML设计模式笔试题
2014/06/07 面试题
学校七一活动方案
2014/01/19 职场文书
机修工工作职责
2014/02/21 职场文书
舞蹈专业求职信
2014/06/13 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
军训新闻稿范文
2015/07/17 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL