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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
setAttribute 与 class冲突解决
Feb 17 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
php curl发送请求实例方法
2019/08/01 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
js工具方法弹出蒙版
2013/05/08 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python操作redis的方法
2015/07/07 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
一百行python代码将图片转成字符画
2021/02/19 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python语言进阶知识点总结
2019/05/28 Python
Python 如何创建一个线程池
2020/07/28 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
办公室秘书岗位职责范本
2014/02/11 职场文书
公司内部升职自荐信
2015/03/27 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers