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

利用HTML5

dragenter

dragover

dragleave

drop

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

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

filereader.readAsDataURL(files[i]);

利用this.result

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

若想獲得圖片大小，需要重新實(shí)例一個(gè)Image對(duì)象：

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

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/openflyme/p/4727772.html

總結(jié)

以上是生活随笔為你收集整理的FileReader上传图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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