$(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)
})
粘贴上传附件:可根据提示安装邮箱小工具控件,安装后,支持将复制的文件Ctrl+V直接粘贴到写信页上传附件。2.支持html5的浏览器(例如:谷歌、火狐、IE10),用户可直接将本地的文件拖拽至写信页的任意一个区域,即可上传附件。
3.拖拽上传多个附件:采用超大附件上传,在弹框中,可直接拖拽文件至该区域,即可快速上传附件。