怎样用html5实现拖拽上传文件

，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。

$(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)

})

拖拽的过程就不说了，这里主要说一下如何在前端获取到图片的相关信息。

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.naturalWidth

var height = e.target.naturalHeight

还有一种情况就是，如果已经存在页面里的图片，怎么获取到原始尺寸呢，可以这样：

var img = document.getElementsByTagName('img')[0] // 获取到图片

var width = img.naturalWidth

var height = img.naturalHeight

目前用户要通过Web上传一个文件是通过 <input type="file /">这个标记。具体过程需要在一个很傻的对话框里定位文件夹 ->在大量的文件里找到目标文件 ->确定 ->点“上传”按钮。我们能不能把这个步骤简化，实现拖拽上传呢？

比如说，

1. 在 资源管理器 里选择一个图片

2. 拖拽到一个网页，比如说一个正在编辑的博客

3. 后台AJXJ自动上传这个图片

4. 在正在编辑的博客的当前位置直接插入并显示图片。

我想用javascript实现。（跟AJAX一样，有一点hack的味道。）

原理很简单。首先用户拖拽一个图片到浏览器，浏览器会自动跳转到这个图片。比如说我拖拽 D:\test\1.jpg 到浏览器，浏览器会跳转当前页面到 file:///D:/test/1.jpg。那么我们要做的就是在浏览器跳转之前：

1. 截获body.onunload事件，并取消浏览器的跳转

2. 获知浏览器将要跳转到的页面

3. 自动填写 <input type="file" />的地址

4. AJAX后台上传图片

5. 把图片插入当前的正在编辑位置。

发这个帖子的目的，想跟大家探讨这个设想的可能性。最后希望得出一个结论：可行，还是不可行。如果可行的话我希望深入探讨出一个固定的模式。（像AJAX那样）

---