成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

問題

如何判斷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);
  }
});

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

我把這個函數完善了一下，獲取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);
    }
  });
}

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

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

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