$(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)
})
图片自带拖拽功能其他元素可设置draggable属性
例子:
https://element.eleme.cn/#/zh-CN ---》组件（菜单）---》Tree树形控件---》可拖拽节点（右侧）
只作为了解, 因为现在火狐已经没有兼容问题
火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签
火狐在没有添加dataTransfer前不能使用ondrag和ondragend事件,其他都可以
dataTransfer 是 拖拽事件对象的属性
，参考上面的例子
通过FileReader对象可以读取本地存储的文件信息, 使用File对象 指定要读取的文件数据
HTML5 新增的内置构造函数,可以读取本地文件的信息
性能低,没有必要吧这些字符串渲染到页面中
读取拖入的图片信息，并显示在页面上
多文件的拖入上传
利用FileReader读取信息
拖拽的过程就不说了，这里主要说一下如何在前端获取到图片的相关信息。
html5里有一个fileReader的全局变量，用来读取本地文件，比如txt，img等，下面是一个简单的代码。
function checkFile(files){var file = files[0]
var reader = new FileReader()
// show表示<div id='show'></div>，用来展示图片预览的
if(!/image\/\w+/.test(file.type)){
show.innerHTML = "请确保文件为图像类型"
return false
}
// onload是异步操作
reader.onload = function(e){
show.innerHTML = '<img src="'+e.target.result+'" alt="img">'
}
reader.readAsDataURL(file)
}
这样就能够在不上传到服务器的前提下预览图片。当然，这个问题的重点是获取图片的原始尺寸，html5里还提供了两个变量来获取：naturalWidth和naturalHeight，这两个分别来获取图片的原始宽度和原始高度。
在上面的例子中，就能通过下面的方式获取到：
var width = e.target.naturalWidthvar height = e.target.naturalHeight
还有一种情况就是，如果已经存在页面里的图片，怎么获取到原始尺寸呢，可以这样：
var img = document.getElementsByTagName('img')[0] // 获取到图片var width = img.naturalWidth
var height = img.naturalHeight
