Javascript 上传图像时控制图像宽度和高度

直截了当。我想在用户使用plupload上传图像时设置图像的宽度和高度限制

比方说： 如果 宽度：1000px 高度：1000px 其他的 您必须上载宽度至少为1000px、高度至少为1000px的图像

// $(".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();

---

那么，这可能吗？

Plupload本身不支持这一点。这可能有两个原因，首先是因为在上传到IE之前无法获取图像尺寸，其次，虽然这对使用HTML4/5方法的某些浏览器有效，但我不确定Flash/Silverlight等方法是否也能够可靠地确定尺寸

如果您对有限的浏览器、HTML4/5方法感到满意，那么您应该将其挂接到

---

Plupload本身不支持这一点。这可能有两个原因，首先是因为在上传到IE之前无法获取图像尺寸，其次，虽然这对使用HTML4/5方法的某些浏览器有效，但我不确定Flash/Silverlight等方法是否也能够可靠地确定尺寸

如果您对有限的浏览器、HTML4/5方法感到满意，那么您应该将其挂接到

---

我最近也想做同样的事情，并且能够按照汤姆的建议实现它。不过，他对它的局限性是正确的；如果您想添加它，它将只在现代浏览器中工作，而不在flash或silverlight运行时中工作。这不是什么大问题，因为我的非html5用户只会在上传后而不是之前收到错误

我初始化了total image count变量，以跟踪页面上放置的图像。此外，在阅读完所有照片后，还可以存储要删除的照片

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的情况下获得图像的宽度

资料来源：

上载之前，请缩略图像：

访问图像的自然宽度：

---

我最近也想做同样的事情，并且能够按照汤姆的建议实现它。不过，他对它的局限性是正确的；如果您想添加它，它将只在现代浏览器中工作，而不在flash或silverlight运行时中工作。这不是什么大问题，因为我的非html5用户只会在上传后而不是之前收到错误

我初始化了total image count变量，以跟踪页面上放置的图像。此外，在阅读完所有照片后，还可以存储要删除的照片

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的情况下获得图像的宽度

资料来源：

上载之前，请缩略图像：

访问图像的自然宽度：

---

要在不缩略图像的情况下访问宽度和高度，可以执行以下操作：

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);
    }
}

---

要在不缩略图像的情况下访问宽度和高度，可以执行以下操作：

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);
    }
}

---

您可以轻松地为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,
        },

---

您可以轻松地为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,
        },

---

是否有任何方法在显示错误后也上载图像。是否有任何方法在显示错误后也上载图像。