欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年08月04日 10:16:35   投稿：daisy  
本文通過(guò)實(shí)例代碼告訴大家如何利用jQuery獲取file控件中圖片的寬高與大小，在我們上傳之前就可以檢查上傳圖片的大小，高度，寬度是否適合我們的要求了，下面是關(guān)于判斷圖片的寬高大小的代碼。

問(wèn)題

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

解決方案

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

在Stack Overflow找到一個(gè)方法獲取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)可以用，僅在火狐中測(cè)試了，其他瀏覽器兼容性未知，因?yàn)楹笈_(tái)使用，所以暫且不管兼容性，拿來(lái)封裝了一下。

我把這個(gè)函數(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);
    }
  });
}

這里使用了一個(gè)回調(diào)方法，回調(diào)方法的參數(shù)是這個(gè)json對(duì)象，包含寬度、高度和大小，在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圖片的寬高和大小的全部?jī)?nèi)容了，相信本文的內(nèi)容會(huì)對(duì)大家平時(shí)使用jQuery和圖片上傳的時(shí)候很有幫助的。

相關(guān)文章

最新評(píng)論