拖拽的過程就不說了，這裏主要說壹下如何在前端獲取到圖片的相關信息。
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;