在拖放的过程中会触发以下事件:
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
event对象(以e代替)
e.target
W3Cschool上的解释是:返回触发此事件的元素(事件的目标节点),这个target属性只兼容ie9及以上
e.preventDefault()
取消事件的默认动作。
e.dataTransfer.setData()
设置被拖数据的数据类型和值。
e.dataTransfer.getData()
获得被拖的数据。
,首先要判断拖入的文件是否符合要求,包括图片类型、大小等,然后获取本地图片信息,实现预览,最后上传。$(function(){
...接上部分
var box = document.getElementById('drop_area')//拖拽区域
box.addEventListener("drop",function(e){
e.preventDefault()//取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files//获取文件对象
//检测是否是拖拽文件到页面的 *** 作
if(fileList.length == 0){
return false
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是图片!")
return false
}
//拖拉图片到浏览器,可以实现预览功能
var img = window.webkitURL.createObjectURL(fileList[0])
var filename = fileList[0].name//图片名称
var filesize = Math.floor((fileList[0].size)/1024)
if(filesize>500){
alert("上传大小不能超过500K.")
return false
}
var str = "<img src='"+img+"'><p>图片名称:"+filename+"</p><p>大小:"+filesize+"KB</p>"
$("#preview").html(str)
//上传
xhr = new XMLHttpRequest()
xhr.open("post", "upload.php", true)
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
var fd = new FormData()
fd.append('mypic', fileList[0])
xhr.send(fd)
},false)
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)