jQuery獲取file控件中圖片的寬高與大小

更新時間：2016年08月04日 10:16:35 投稿：daisy

本文通過實例代碼告訴大家如何利用jQuery獲取file控件中圖片的寬高與大小，在我們上傳之前就可以檢查上傳圖片的大小，高度，寬度是否適合我們的要求了，下面是關(guān)于判斷圖片的寬高大小的代碼。

問題

如何判斷input file表單里上傳的圖片的寬高和大小呢？

解決方案

這個時候圖片還沒真正上傳，也不是在頁面上展示，不能使用$(“#id”).width(),$(“#id”).height()這種方式。

在Stack Overflow找到一個方法獲取input file圖片文件的寬高：

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
  var file, img;
  if ((file = this.files[0])) {
    img = new Image();
    img.onload = function () {
      alert(this.width + " " + this.height);
    };
    img.src = _URL.createObjectURL(file);
  }
});

發(fā)現(xiàn)可以用，僅在火狐中測試了，其他瀏覽器兼容性未知，因為后臺使用，所以暫且不管兼容性，拿來封裝了一下。

我把這個函數(shù)完善了一下，獲取input file圖片的寬高和大小，如下：

//獲取input圖片寬高和大小
function getImageWidthAndHeight(id, callback) {
  var _URL = window.URL || window.webkitURL;
  $("#" + id).change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
      img = new Image();
      img.onload = function () {
        callback && callback({"width": this.width, "height": this.height, "filesize": file.size});
      };
      img.src = _URL.createObjectURL(file);
    }
  });
}

這里使用了一個回調(diào)方法，回調(diào)方法的參數(shù)是這個json對象，包含寬度、高度和大小，在jQuery中這樣調(diào)用：

(function () {
  //省略其他代碼
  getImageWidthAndHeight('image_file', function (obj) {
   if (obj.width != 843 || obj.height != 1038) {
    $.messager.alert('操作提示', '彈窗圖片寬高必須是843*1038px');
   }
  });
})(jQuery)

好了，這樣就OK了。以上就是jQuery獲取intput file圖片的寬高和大小的全部內(nèi)容了，相信本文的內(nèi)容會對大家平時使用jQuery和圖片上傳的時候很有幫助的。

您可能感興趣的文章:

相關(guān)文章

jQuery插件cxSelect多級聯(lián)動下拉菜單實例解析
這篇文章主要為大家詳細(xì)解析了jQuery插件cxSelect多級聯(lián)動下拉菜單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
jQuery實現(xiàn)的省市縣三級聯(lián)動菜單效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的省市縣三級聯(lián)動菜單效果,結(jié)合完整實例形式分析了jQuery數(shù)組操作及事件響應(yīng)的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
2016-08-08
jQuery實現(xiàn)下拉框左右移動（全部移動，已選移動）
本文主要介紹jQuery中利用appendTo()方法追加元素已實現(xiàn)左右移動的功能，希望對大家有所幫助。
2016-04-04
jQuery 通過事件委派一次綁定多種事件，以減少事件冗余
jQuery的最大特色之一就是方法連綴寫法，這樣的書寫方式使得閱讀起來更加方便。
2010-06-06
運(yùn)用jquery實現(xiàn)table單雙行不同顯示并能單行選中
（該方法是對《運(yùn)用jquery實現(xiàn)（table）單雙行不同顯示并能多行選中》的改進(jìn)，適合于單行選擇）
2009-07-07
jQuery 美元符沖突的解決方法
jQuery 美元符沖突的解決方法，使用jquery與別的js庫共同使用的時候需要注意的地方。
2010-03-03
jQuery實現(xiàn)的鼠標(biāo)經(jīng)過時變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實現(xiàn)的鼠標(biāo)經(jīng)過時變寬的效果,實例演示了jQuery的Kwicks插件實現(xiàn)針對鼠標(biāo)事件的響應(yīng)與頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-04-04
jquery判斷元素的子元素是否存在的示例代碼
本篇文章主要是對jquery判斷元素的子元素是否存在的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
最近項目里對表格的操作比較多。以往我們要做一些效果的時候往往通過程序代碼來實現(xiàn)，這個努力不值，因為JQuery是完全可以做到的，并且是客戶端運(yùn)行，不經(jīng)過服務(wù)器處理，給用戶的反應(yīng)快，也減少了服務(wù)器壓力
2012-02-02
jQuery Validate驗證表單時多個name相同的元素只驗證第一個的解決方法
這篇文章主要介紹了jQuery Validate驗證表單時多個name相同的元素只驗證第一個的問題及解決方法,需要的朋友可以參考下
2016-12-12