使用 Jquery-File-Upload 插件限制图像尺寸答案

【问题标题】：Restrict image dimensions using Jquery-File-Upload plugin使用 Jquery-File-Upload 插件限制图像尺寸
【发布时间】：2016-03-13 12:24:46
【问题描述】：

我正在使用一个使用 jQuery-File-Upload 的 wordpress 主题，我需要在将图像文件上传到服务器之前限制它的尺寸。有没有办法做到这一点？我对 jquery 不是很有经验，对此我感到非常沮丧。 :(

【问题讨论】：

标签： jquery file upload blueimp

【解决方案1】：

我找不到为此提供的任何解决方案，因此我决定使用插件回调来取消使用 jquery 的上传，并带有可选警告。

var _URL = window.URL || window.webkitURL;
            $('#fileupload').bind('fileuploadadd', function (e, data) {
                var file, img;

                if ((file = data.files[0])) {
                    img = new Image();
                    img.onload = function() {
                        if(this.width !== 480 || this.height !== 70) {
                            $("#fileupload tr").filter(function(i) {  return $(this).find(".name").html() === file.name}).find("td:last-child .cancel").click();
                            alert("The dimensions of " + file.name + " is" + this.width + "x" + this.height +  "! Only 480x70 is allowed!");
                        }
                    };
                    img.onerror = function() {
                        alert( "not a valid file: " + file.type);
                    };
                    img.src = _URL.createObjectURL(file);
                }
            });

【讨论】：

【解决方案2】：

与其在上传之前限制图像文件尺寸，不如重新调整图像大小？这是插件提供的功能。看看“jquery.fileupload-image.js”。

如果您想限制大小，您可以在下载后执行此操作。该插件可以做到这一点，这要归功于 UploadHandler (.php)，您可以在其中设置这些限制。下面的例子：

// Image resolution restrictions:
'max_width' => 800,
'max_height' => 600,
'min_width' => 1,
'min_height' => 1,

另一种解决方案是在“添加”中添加一个回调，该回调将触发一个检查图像宽度/高度的函数。示例：How to Preview Image, get file size, image height and width before upload?

【讨论】：

是的，我也试过了，但没用。最后我们改变了网站的主题，这个新的不再使用那个插件了。