html元素拖拽预览图,HTML5拖拽上传图片预览
1.文件API:(File API)
file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件。file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块。总之,file对象包含与FlieList对象,而file对象继承于Blob对象!
各对象的相关属性关系:
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.拖拽上传图片预览:
思路:
熟悉文件拖拽 目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为 拖拽放置后,获取到文件对象集合:e.dataTransfer.files 循环该集合中的每个文件对象,判断文件类型以及文件大小,是指定类型则进行相应的操作 读取文件信息对象:new FileReader(),它有读取文件对象为DataUrl等方法:readAsDataURL(文件对象)、读取成功之后触发的事件:onload事件等,this.result为读取到的数据 在FileReader对象中的几个事件中进行相应的逻辑处理
HTML:
请将图片文件拖拽至此区域!
总加载数:100
JQ:
$(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 = $("");
oImg.attr("src", this.result);
$(oDiv).append(oImg); //oDiv转换为js对象调用方法
}
//无论成功与否都会触发
reader.onloadend = function() {
if (reader.error) {
console.log(reader.error);
} else {
//上传没有错误,ajax发送文件,上传二进制文件
}
}
} else {
alert('请上传图片文件!');
}
}
}
});
效果图:
总结:结合拖放事件API,DataTransfer对象和文件读取对象FileList等方面的知识,实现简易拖拽上传图片预览效果。需要了解熟悉个对象的关系以及用法,明确好实现思路!
html元素拖拽预览图,HTML5拖拽上传图片预览相关推荐
- html5拖拽换位效果演示,HTML5拖拽(二)--dataTransfer
从HTML5拖拽(一)我们得知:利用html5的dragable属性以及一些拖拽事件可以进行拖拽,但是无法获得所拖拽的数据.dataTransfer就应运而生,顾名思义,这是个传递数据的属性. 基础语 ...
- v-viewer预览图的使用(图片预览旋转/放大缩小/上下切换等)
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件.因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片i ...
- 基于html5的拖拽建站,基于html5 拖拽连线加强版实现
自动折线,自动判断起始点坐标,拖拽位置变换,大小拖拽,箭头指向等功能,这个版本稍微复杂一点, 还有个简单版本的实现http://zha-zi.iteye.com/blog/1586814 这个应该比较 ...
- 通过 html5 FileReader 实现上传图片预览功能
为什么80%的码农都做不了架构师?>>> Html 部分 <!DOCTYPE html> <html><head><meta char ...
- html实现多图片上传并预览,【前端预览】实现多张上传图片预览查看
alert("抱歉,你的浏览器不支持 FileReader"); input.setAttribute('disabled','disabled'); }else{ input.a ...
- C# Winform 相册功能,图片缩放,拖拽,预览图分页
效果 1.图片放大,缩小,拖拽功能 2.添加图片,分页功能 一.前言 在一些项目中也会用到预览图片的功能,至于为什么有一个添加图片的按钮,是因为有些项目,比如视觉相关的项目,摄像头拍摄图片,然后显示在 ...
- html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
- 拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...
- 拖拽上传技术-----html5[转载]
原网址:http://blog.163.com/mongying_net/blog/static/35112712012345352226/ 拖拽上传应用主要使用了以下HTML5技术: Drag&am ...
最新文章
- Python解释器种类以及特点
- loadrunner录制事件为0_Oracle数据库性能监控|LoadRunner 中配置监控Oracle
- 【做题记录】[NOI2008] 假面舞会—有向图上的环与最长链
- JAVA中整数类型数据溢出问题研究
- IBM Machine Learning学习笔记(二)——Supervised Learning: Regression
- Winform 视频流叠加透明控件. 使用DSkin皮肤框架实现
- 从鹿晗关晓彤恋情事件看运维的节假日准备工作
- 陪玩视频聊天系统开发,升级与更新功能的实现
- CTF之misc-其他类型隐写
- 赋能合作伙伴,共建价值生态 | ZDNS产品及行业解决方案培训会圆满举行
- htc legend 升级到 android 2.2 froyo 后,输入法问题
- kali linux 工具使用之 001 dnsenum
- 想在家挣钱,这几个项目可以让你月入过万
- 一个自动将状态机生成代码的软件
- Face Detection paper 1st season
- 2023最新Web前端面试题精选大全及答案(一)
- 特殊符号(制表符、空格、段落标记等)的显示与隐藏
- 如何快速创建腾讯云MySQL数据库并远程连接?
- 世界杯 | 其实世界杯结束之前,卡塔尔就开拆体育场了...
- 无法卸载McAfee Framework Service