怎样用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)

})

预览图片

预览功能的基本设计思路：创建一个img元素，再把文件域的value值赋值给img元素的src属性。

<form name="form4" id="form4" method="post" action="#">

<input type="file" name="file4" id="file4" ōnchange="preview4()" />

<img id="pic4" src="" alt="图片在此显示" width="120"/>

</form>

<scrīpt type="text/javascrīpt">

function preview4(){

var x = document.getElementById("file4")

var y = document.getElementById("pic4")

if(!x || !x.value || !y)

return

var patn = /\.jpg$|\.jpeg$|\.gif$/i

if(patn.test(x.value)){

y.src = "file://localhost/" + x.value

}

else{ alert("您选择的似乎不是图像文件。")}

}

</scrīpt>

试下效果：

如果你用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许我们显示一个用户的本地图像文件。不知道他们为什么要这么做，我个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，他并不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。

让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：

在Firefox的地址栏中输入“about:config”

继续输入“security.checkloaduri”

双击下面列出来的一行文字，把它的值由true改为false

然后你可以再试试上面预览，everything works well！可惜的是我们并不能要求所有的用户都去修改这个值（更不用说修改的过程还挺麻烦），所以这对我们来说毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。

用DOM来创建对象

在上面的XHTML代码中，我们为了预览图片，事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外，如果用户浏览器不支持Javascrīpt，他不仅无法使用这个功能，还要接受页面上一个永远不会显示出来的破图。要解决这个问题，我们就需要在“运行时”再生成这个img对象，途径还是DOM。

<form name="form5" id="form5" method="post" action="#">

<input type="file" name="file5" id="file5" ōnchange="preview5()"/>

</form>

<scrīpt type="text/javascrīpt">

function preview5(){

var x = document.getElementById("file5")

if(!x || !x.value)

return

var patn = /\.jpg$|\.jpeg$|\.gif$/i

if(patn.test(x.value)){

var y = document.getElementById("img5")

if(y){ y.src = 'file://localhost/' + x.value }

else{

var img=document.createElement('img')

img.setAttribute('src','file://localhost/'+x.value)

img.setAttribute('width','120')

img.setAttribute('height','90')

img.setAttribute('id','img5')

document.getElementById('form5').appendChild(img)

}

}

else{alert("您选择的似乎不是图像文件。") }

}

</scrīpt>

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

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

---