Javascript 如何在Dropzone JS中将createImageThumbnails设置为false时获取图像维度？

使用Dropzone.js，我尝试使用createImageThumbnails=false获取图像高度和宽度。更准确地说，我不需要在拖放图像时创建缩略图，因为这个过程会变慢，特别是当我一次拖放多个图像时。我只需要扫描掉的所有图像的高度和宽度，并将它们保存到数据库中。但问题是，当我关闭缩略图创建时，dropzone不提供图像高度和宽度。根据文档，图像高度和宽度是在触发缩略图事件后提供的。所以，这与我需要的正好相反。因此，作为一个解决方案，我希望能够得到图像高度和宽度的信息，一旦图像被放入dropzone，并没有任何延迟创建缩略图。如果有办法的话，请告诉我

HTML

JS

jQuery（文档）.ready（函数（$）
{
var images=Array（）；
var项目=[]；
Dropzone.options.uploadWidget={
自动处理队列：false，
acceptedFiles:'image/*'，
预览模板：“”，
createImageThumbnails:false，
init:function（）{
this.on（“addedfile”，函数（文件）
{
高度=file.height；
宽度=file.width；
item={Name:file.Name，Size:file.Size，Height:file.Height，Width:file.Width}；
图片。推送（项目）；
});
}
};
});

您可以尝试使用

accept

函数、

FileReader（）

和

Image（）

构造函数

Dropzone.options.uploadWidget = {
  autoProcessQueue: false,
  acceptedFiles: 'image/*',
  previewTemplate: '<div class="dz-filename"><span data-dz-name></span></div>',
  createImageThumbnails: false,
  accept: function(file, done) {

    // FileReader() asynchronously reads the contents of files (or raw data buffers) stored on the user's computer.
    var reader = new FileReader();
    reader.onload = (function(entry) {
      // The Image() constructor creates a new HTMLImageElement instance.
      var image = new Image(); 
      image.src = entry.target.result;
      image.onload = function() {

        console.log(this.width);
        console.log(this.height);

      };
    });

    reader.readAsDataURL(file);
    done();
  }
}

Dropzone.options.uploadWidget={
自动处理队列：false，
acceptedFiles:'image/*'，
预览模板：“”，
createImageThumbnails:false，
接受：函数（文件，完成）{
//FileReader（）异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。
var reader=new FileReader（）；
reader.onload=（函数（条目）{
//Image（）构造函数创建一个新的HTMLImageElement实例。
var image=新图像（）；
image.src=entry.target.result；
image.onload=函数（）{
console.log（这个.width）；
console.log（此高度）；
};
});
reader.readAsDataURL（文件）；
完成（）；
}
}

我建议使用

URL.createObjectURL

而不是使用

FileReader

我使用了

URL.createObjectURL

，效果很好。无论哪种方式，都应将此答案标记为正确。

FileReader

和

URL.createObjectURL

都是异步的，在图像上载后使其失败，从而创建成功和错误消息。

jQuery(document).ready(function($)
{
  var images = Array();

  var item = [];

  Dropzone.options.uploadWidget = {
    autoProcessQueue: false,
    acceptedFiles: 'image/*',
    previewTemplate: '<div class="dz-filename"><span data-dz-name></span></div>',
    createImageThumbnails: false,
    init: function() {
      this.on("addedfile", function(file)
      {
        height = file.height;
        width = file.width;
        item = {Name : file.name, Size:file.size, Height:file.height, Width:file.width};
        images.push(item);
      });
  }
  };

});

Dropzone.options.uploadWidget = {
  autoProcessQueue: false,
  acceptedFiles: 'image/*',
  previewTemplate: '<div class="dz-filename"><span data-dz-name></span></div>',
  createImageThumbnails: false,
  accept: function(file, done) {

    // FileReader() asynchronously reads the contents of files (or raw data buffers) stored on the user's computer.
    var reader = new FileReader();
    reader.onload = (function(entry) {
      // The Image() constructor creates a new HTMLImageElement instance.
      var image = new Image(); 
      image.src = entry.target.result;
      image.onload = function() {

        console.log(this.width);
        console.log(this.height);

      };
    });

    reader.readAsDataURL(file);
    done();
  }
}