實現(xiàn)拖拽圖片，在上傳至服務器前，顯示圖片并操控大小

利用HTML5

dragenter

dragover

dragleave

drop

在實現(xiàn)圖片顯示方面，用了FileReader這個類

var files=event.dataTransfer.files;//獲取拖拽的圖片集合

filereader.readAsDataURL(files[i]);

利用this.result

<img src='"+this.result+"'/>顯示圖片到頁面

若想獲得圖片大小，需要重新實例一個Image對象：

var img = new Image();//創(chuàng)建image對象
img.src =innerimg.attr("src") ;//此處innerImg指的就是上傳的圖片jQuery對象
var w = img.width;
var h=img.height;

?

關于FileReader的相關信息，可以看http://www.helloweba.com/view-blog-224.html

轉載于:https://www.cnblogs.com/openflyme/p/4727772.html

總結

以上是生活随笔為你收集整理的FileReader上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。