JS HTML5拖放上传图片预览

1.文件应用编程接口：(文件应用编程接口)

由文件类型的表单控件选择的每个文件都是一个文件对象，而文件列表对象是这些文件对象的集合列表，代表所有选择的文件。文件对象继承自Blob对象，Blob对象表示二进制原始数据，提供切片方法，可以访问字节内的原始数据块。一句话，文件对象包含FlieList对象，文件对象继承自Blob对象！

每个对象的相关属性关系：

FileReader接口：从图中可以看出，HTML5还提供了FileReader接口，用于将文件读入内存，读取文件中的数据。

var reader=new FileReader()；

这个界面有四个方法六个事件：readasbinarystring(文件):读取文件为二进制readasdataurl(文件):读取文件DataURL readAsText(文件，[编码]):读取文件为文本关于(无):中断文件读取-。Gress: onload总是在读取文件时触发：onloadend在成功读取文件时触发：在读取文件结束时触发(成功和失败都被触发)。上述事件参数e有e.target.result或this.result指向读取结果！

2.拖放应用编程接口：

拖拽属性：将待拖拽元素的可拖拽属性设置为true(draggable=“true”)！默认情况下，可以拖放Img元素和a元素。

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

拖放元素事件：dragstart:在拖动前触发拖动，拖动前后连续拖动结束，dragenter触发目标元素事件：进入目标元素时拖动，在进入目标和离开目标之间连续拖动离开，离开目标元素时放下，在目标元素上释放鼠标触发but！需要注意的是，在目标元素的dragover和drop事件中，应该防止默认行为(拒绝拖拽)，否则无法实现拖拽！

-

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

3个属性：效果允许：设置光标样式(无、复制、复制链接、复制移动、链接移动、移动、全部和未初始化)效果允许：设置拖放操作的视觉效果类型：存储数据的类型、字符串的伪数组文件：获取外部拖动的文件并返回文件列表。文件列表下有四种类型的文件：setData() :设置数据键和值(必须是字符串)getData() :获取数据。根据键值，获取对应的值clearData():清除DataTransfer对象setdragimage (imageurl，logx，long y)中存储的数据：使用img元素设置拖放图标//示例：target。addeventlistener ('dragstart '，函数(e){ varfs=e . data transfer . files；//获取拖放的文件对象列表FlieList对象var dt=e.dataTransferdataTransfer属性dt.effectAllowed='copy '作为拖放事件；dt.setData('text/plain '，' hello ')；dt.setDragImage(dragIcom，-10，-10)；});

3.拖放以上传图片预览：

思路：1。熟悉拖动文件目标元素的四个事件，注意：ondragover和ondrop事件中的阻塞默认行为。2.拖放后，得到文件对象集：e.dataTransfer.files3 3。循环集合中的每个文件对象，判断文件类型和文件大小。如果是指定的类型，执行相应的操作。4.读取文件信息对象：new FileReader()，有读取文件对象为DataUrl: readAsDataURL(文件对象)、读取成功后触发的事件：onload事件等方法。这个结果就是读取的数据。5.在FileReader对象中的几个事件中执行相应的逻辑处理。

HTML:

div class=' container ' p class=' text '请将图片文件拖放到此区域！/p/div总荷载数：跨度id=“总计”100/跨度

JQ:

脚本类型=' text/JavaScript ' $(function(){/*思路：*1。熟悉文件拖放目标元素的四个事件，注意屏蔽：ondragover和ondrop事件*2中的默认行为。拖放后，得到文件对象集：e.dataTransfer.files *3。循环集合中的每个文件对象，判断文件类型和文件大小，如果是指定的类型*4，则执行相应的操作。读取文件信息对象：新建FileReader()，它有读取文件对象为DataUrl: readAsDataURL(文件对象)、读取成功后触发事件：onload事件等方法。这个结果就是读取数据*5。在FileReader对象中的几个事件中进行相应的逻辑处理* *///需要将jq对象转换为js对象，调用原生方法varodiv=$('。容器')。get var oP=$('。文本')；//转到odiv . ondragenter=function(){ op . html(')；}//move，则需要防止默认行为，否则文件odiv . ondragover=function(e){ e . prevent default()将直接显示在此页面上；}//离开odiv。onlove=function () {op.html('请将图片文件拖放到此区域！');}//拖放，但也需要防止默认行为odiv。ondrop=function(e){ e . prevent default()；//获取被拖动的对象，文件对象集var fs=e . datatransfer . files；//如果在表单字段中为文件标签选择了文件，请使用表单[表单名称]。文件[0]以获取文件对象集。//打印长度console . log(fs . length)；//循环多文件拖拽上传为(var I=0；i fs.lengthI) {//文件类型var _type=fs[i]。类型；console . log(_ type)；//确定文件类型if (_type.indexOf('image ')！=-1) {//文件大小控制控制台. log(fs[i]。大小)；//读取文件对象var reader=new file reader()；//读取为无返回值的DataUrl reader . readasdataurl(fs[I])；读者。onload start=function(e){//start loading }//此事件触发reader。on progress=function(e){ $(' # total ')。html (e.total)在阅读过程中的某个时间。}//读取成功时触发，this.result为reader . onload=function(){//file data//console . log(this . result)；//添加文件预览var oimg=$(' img style=' width :100 px；src=' '/')；oImg.attr('src '，this . result)；$(oDiv)。追加(oImg)；//oDiv转换为js对象调用方法}//无论成功与否，都会触发reader . onload end=function(){ if(reader . error){ console . log(reader . error)；} else {//上传无误，ajax发送文件，上传二进制文件}}} else {alert('请上传图片文件！');} } } });/脚本渲染：

总结：结合拖放事件API、DataTransfer对象和文件读取对象FileList的知识，可以实现简单拖放上传图片的预览效果。需要了解熟悉对象的关系和用法，明确实现思路！

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