未在 blueimp 中获取上传图像文件的宽度和高度答案

【问题标题】：Not getting width and height of uploading image file in blueimp未在 blueimp 中获取上传图像文件的宽度和高度
【发布时间】：2017-11-25 13:23:37
【问题描述】：

我正在使用 blueimp 上传文件。它工作正常。但我想上传具有一定宽度/高度的图像。我试图按照这个链接 blueimp fileupload - check the image width and height before upload 文件只有这些数据

lastmodified:1502124635085
name:name.jgp
size:111111
type:"image/jpeg"

但是缺少宽度和高度下面是部分代码

add: function (e, data) {
                if (e.isDefaultPrevented()) {
                    return false;
                }

                console.log(data.files[0]);

                var $this = $(this),
                    that = $this.data('blueimp-fileupload') ||
                        $this.data('fileupload'),
                    options = that.options;
                data.context = that._renderUpload(data.files)
                    .data('data', data)
                    .addClass('processing');
                options.filesContainer[
                    options.prependFiles ? 'prepend' : 'append'
                ](data.context);
                that._forceReflow(data.context);
                that._transition(data.context);
                data.process(function () {
                    return $this.fileupload('process', data);
                }).always(function () {
                    data.context.each(function (index) {
                        $(this).find('.size').text(
                            that._formatFileSize(data.files[index].size)
                        );
                    }).removeClass('processing');
                    that._renderPreviews(data);
                }).done(function () {
                    data.context.find('.start').prop('disabled', false);
                    if ((that._trigger('added', e, data) !== false) &&
                            (options.autoUpload || data.autoUpload) &&
                            data.autoUpload !== false) {
                        data.submit();
                    }
                }).fail(function () {
                    if (data.files.error) {
                        data.context.each(function (index) {
                            var error = data.files[index].error;
                            if (error) {
                                $(this).find('.error').text(error);
                            }
                        });
                    }
                });
            },

是获取文件数据的正确位置还是其他地方。谢谢

【问题讨论】：

如果你只是想获取图片的宽度和高度，你可以使用我下面的例子，并将高度和宽度附加为隐藏输入。

标签： jquery html blueimp

【解决方案1】：

您可以在默认的process queue 中添加定制的process action 下面的示例仅允许 1920x1080 的图像通过。将跳过非图像文件。 FileReader只支持IE10+

$.blueimp.fileupload.prototype.options.processQueue.push({action: 'validateImage'});

// add a customised validator for image width for height, 1920x1080
$.widget('blueimp.fileupload', $.blueimp.fileupload, {
    processActions: {
      validateImage: function(data) {
        var dfd = $.Deferred();
        var file = data.files[data.index];
        if( !/(\.|\/)(gif|jpe?g|png)$/i.test(file.name)){
          dfd.resolveWith(this, [data]);
        }
        else {
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function() {
            var image = new Image();
            image.src = reader.result;
            image.onload = function() {
              if(this.width !== 1920 || this.height !== 1080) {
                data.files.error = true
                file.error = 'Image have to be 1920x1080';
                dfd.rejectWith(this, [data]);
              }
              else {
                dfd.resolveWith(this, [data]);
              }
            }
          };
        }
        return dfd.promise();
      }
    }
});

【讨论】：