html5拖拽图片上传，怎么获得图片原始尺寸

html-css018

html5拖拽图片上传，怎么获得图片原始尺寸,第1张

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

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

你是从网上下个这样的效果，然后有BUG是么，不是你自己写的对么，第一个问题，如果你不想拖出去的话，拖动时，当X和Y值大于你这个DIV最大的那个值，也就是，到最边的时候，值就等于那个最边，这样就不会出去了，第二个问题，他应该是，把拖动时的值显示出来了，你不想要的话，在JS把那一句给删除就可以了，如果不知道在哪，用个笨方法，用CSS把那个DIV隐藏，或用个DIV把他盖住，就行了。