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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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
Banner程序
2006/10/09 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
html5与css3小应用
2013/04/03 HTML / CSS
飞利浦美国官网:Philips美国
2020/02/28 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
2014年党支部承诺书
2014/05/30 职场文书
校园文明标语
2014/06/13 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2014年政工师工作总结
2014/12/18 职场文书
英语教师个人总结
2015/02/09 职场文书
保卫工作个人总结
2015/03/03 职场文书
导游词之贵州织金洞
2019/10/12 职场文书