上传图片时控制图片的宽度和高度

Question

直接点。我想在用户使用plupload上载图像时设置图像宽度和高度的限制。

Letsay： 如果 宽度：1000像素 高度：1000像素 其他 您必须上传图像与至少宽度：1000像素和高度：1000像素

// $(".form").validator(); 
$(function() { 
    if($("#uploader").length > 0) { 
     var uploader = new plupload.Uploader({ 
      runtimes : 'html5,flash,silverlight', 
      browse_button : 'pickfile', 
      container : 'uploader', 
      max_file_size : '10mb', 
      url : 'design.php?do=upload&ajax=1', 
      multiple_queues: false, 
      file_data_name: 'design', 
      flash_swf_url : www + '/js/plupload.flash.swf', 
      silverlight_xap_url : www + '/js/plupload.silverlight.xap', 
      filters : [ 
       {title : "Image files", extensions : "jpg,gif,png,jpeg,bmp"} 
      ] 

     }); 

     $('#uploadfiles').click(function(e) { 
      if($("#uploader select[name=category]").val() == "") { 
       $("#uploader select[name=category]").next('.error-required').show(); 
       return false; 
      } 

      uploader.start(); 
      e.preventDefault(); 
     }); 

     uploader.init(); 

那么，这可能吗？

Answer 1

您可以轻松地为plupload编写过滤器。

这里是过滤器所需的最小宽度。 将波纹管代码添加到脚本中。 （只是复制）

plupload.addFileFilter('min_width', function(maxwidth, file, cb) { 
    var self = this, img = new o.Image(); 

    function finalize(result) { 
     // cleanup 
     img.destroy(); 
     img = null; 

     // if rule has been violated in one way or another, trigger an error 
     if (!result) { 
      self.trigger('Error', { 
       code : plupload.IMAGE_DIMENSIONS_ERROR, 
       message : "Image width should be more than " + maxwidth + " pixels.", 
       file : file 
      }); 
    } 
     cb(result); 
    } 
    img.onload = function() { 
     // check if resolution cap is not exceeded 
     finalize(img.width >= maxwidth); 
    }; 
    img.onerror = function() { 
     finalize(false); 
    }; 
    img.load(file.getSource()); 
}); 

并将此过滤器添加到您的上传脚本。

filters : { 
      min_width: 700, 
     }, 

Answer 2

Plupload本身不支持（although it has been requested）。这可能有几个原因，首先是因为在IE上传之前你无法获得图像尺寸（you can in some other browsers），其次，虽然这对于使用HTML4/5方法的浏览器来说可行，但我不是确保Flash/Silverlight等方法也能够可靠地确定尺寸。

如果您对有限的浏览器，HTML4/5方法感到满意，只有您应该挂入"FilesAdded" event例如

uploader.bind('FilesAdded', function(up, files) { 
    //Get src of each file, create image, remove from file list if too big 
}); 

Answer 3

我最近想做同样的事情，并且能够按照Thom的建议实现它。尽管如此，他对此仍然是正确的。如果你想添加这个，它只能在现代浏览器中使用，而不能在闪存或Silverlight运行时中使用。这不是一个大问题，因为我的非html5用户只会在上传之后得到错误，而不是之前。

我初始化了一个总图像计数变量来跟踪放置在页面上的图像。在我们读完所有照片之后，我们还可以存储想要删除的照片。

var total_image_count = 0; 
var files_to_remove = []; 

然后，我阅读的FileReader（）挂起的文件，将它们放置在页面上，并得到他们的宽度

init:{ 
     FilesAdded: function(up, files) { 
      if (uploader.runtime == "html5"){ 
       files = jQuery("#"+uploader.id+"_html5")[0].files 
       console.log(files); 
       for (i in files){ 

       //create image tag for the file we are uploading 
       jQuery("<img />").attr("id","image-"+total_image_count).appendTo("#upload-container"); 

       reader_arr[total_image_count] = new FileReader(); 

       //create listener to place the data in the newly created 
       //image tag when FileReader fully loads image. 
       reader_arr[total_image_count].onload = function(total_image_count) { 
        return function(e){ 
         var img = $("#image-"+total_image_count); 
         img.attr('src', e.target.result); 
         if ($(img)[0].naturalWidth < 1000){ 

          files_to_remove.push(files[i]); //remove them after we finish reading in all the files 
          //This is where you would append an error to the DOM if you wanted. 
          console.log("Error. File must be at least 1000px"); 
         } 
        } 
       }(total_image_count); 

       reader_arr[total_image_count].readAsDataURL(files[i]); 

       total_image_count++; 
       } 
       for (i in files_to_remove){ 
       uploader.removeFile(files_to_remove[i]); 
       } 
      } 
     } 
    } 

作为一个方面说明，我是想显示图像的缩略图，无论如何，所以这种方法对我很好。我还没有想出如何在没有首先将其附加到DOM的情况下获取图像的宽度。

来源：

缩略图上传之前的图像： https://stackoverflow.com/a/4459419/686440

访问图像的自然宽度： https://stackoverflow.com/a/1093414/686440

Answer 4

访问宽度和heigth不带缩略图，你可以做到这一点的图像：

uploader.bind('FilesAdded', function(up, files) { 
    files = jQuery("#"+uploader.id+"_html5").get(0).files; 
    jQuery.each(files, function(i, file) { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var image = new Image(); 
      image.src = e.target.result; 

       image.onload = function() { 
        // access image size here using this.width and this.height 
       } 
      }; 

     }); 

     reader.readAsDataURL(file); 
    } 
}