1.文件API:(File API)
file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件。file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块。总之,file对象包含与FlieList对象,而file对象继承于Blob对象!
各对象的相关属性关系:
FileReader接口:
由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取文件中的数据。
var reader=new FileReader();
该接口总共有四个方法和六个事件:
"color: #000000">DataTransfer对象:专门用于存放拖放时要携带的数据,可以被设置为拖放事件的dataTransfer属性。
3个属性:
"color: #800000">4个方法:
"color: #800000">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>
效果图:
总结:结合拖放事件API,DataTransfer对象和文件读取对象FileList等方面的知识,实现简易拖拽上传图片预览效果。需要了解熟悉个对象的关系以及用法,明确好实现思路!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月27日
2024年09月27日
- 许美静.1999-快乐无罪【上华】【WAV+CUE】
- 群星.2024-Jambo.Medley(BEYOND40周年·致敬2)【Kinns】【FLAC分轨】
- 林翠萍.1991-舞曲世界2辑【星河】【WAV+CUE】
- 关智斌.2007-In.Progress【英皇娱乐】【FLAC分轨】
- 群星.2000-电影主题曲原声带·琼瑶的世界【歌林】【WAV+CUE】
- 范世錡.2024-錡妙夜(EP)【天娱传媒】【FLAC分轨】
- 谭咏麟.2000-魅力千禧演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 纯音入心系列纯音乐《器乐古筝》1CD[MP3][239MB]
- 纯音入心系列纯音乐《华夏民乐之古筝篇》1CD[MP3][192MB]
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】