上传前获取文件大小、图片宽度和高度

Question

如何使用jQuery或JavaScript在上传到我的网站之前获取文件大小、图像高度和宽度？

- Afshin

---

这个链接非常有用：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL - Stardust

谢谢您的问题。Mamnoon - Mohammadali Mirhamed

Answer 1

多图片上传并带有信息数据预览

使用HTML5和文件API

使用URL API作为例子

图像源将会是一个代表Blob对象的URL
<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

const EL_browse  = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

const readImage  = file => {
  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);

  const img = new Image();
  img.addEventListener('load', () => {
    EL_preview.appendChild(img);
    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`);
    window.URL.revokeObjectURL(img.src); // Free some memory
  });
  img.src = window.URL.createObjectURL(file);
}

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Remove old images and data
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});

#preview img { max-height: 100px; }

<input id="browse" type="file" multiple>
<div id="preview"></div>

使用 FileReader API 的示例

如果需要将图片源作为长的Base64编码数据字符串
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">

const EL_browse  = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

const readImage = file => {
  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
    return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`);

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    const img  = new Image();
    img.addEventListener('load', () => {
      EL_preview.appendChild(img);
      EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`);
    });
    img.src = reader.result;
  });
  reader.readAsDataURL(file);  
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Clear Preview
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});

#preview img { max-height: 100px; }

<input id="browse" type="file"  multiple>
<div id="preview"></div>
  

- Roko C. Buljan

---

@SMC http://caniuse.com/fileapi 最近才开始支持File API。我会看一下的。 - Roko C. Buljan

当在回调函数reader.onload中弹出i的值时，它显示了一个随机增量！例如，对于4个文件，弹出的值为0 3 2 1。有人能解释一下吗？ - freerunner

@freerunner，你的文件大小不同，因此无法同时加载。 - Roko C. Buljan

看起来像是 https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images - WebBrother

@RokoC.Buljan，谢谢。我有一个问题，如果我想使用XMLHttpRequest和formData上传这个文件，您建议我在“readImage（file）;”后调用一个新函数吗？ - Joe Platano

Answer 2

演示

不确定是否符合您的要求，但这是一个简单的例子：

var input = document.getElementById('input');

input.addEventListener("change", function() {
    var file  = this.files[0];
    var img = new Image();
  
    img.onload = function() {
        var sizes = {
            width: this.width,
            height: this.height
        };
        URL.revokeObjectURL(this.src);
    
        console.log('onload: sizes', sizes);
        console.log('onload: this', this);
    }

    var objectURL = URL.createObjectURL(file);
  
    console.log('change: file', file);
    console.log('change: objectURL', objectURL);
    img.src = objectURL;
});

- WebBrother

Answer 3

如果您能使用jQuery验证插件，您可以按以下方式进行：

Html: ```html ```

<input type="file" name="photo" id="photoInput" />

JavaScript:

$.validator.addMethod('imagedim', function(value, element, param) {
  var _URL = window.URL;
        var  img;
        if ((element = this.files[0])) {
            img = new Image();
            img.onload = function () {
                console.log("Width:" + this.width + "   Height: " + this.height);//this will give you image width and height and you can easily validate here....

                return this.width >= param
            };
            img.src = _URL.createObjectURL(element);
        }
});

该函数作为 onload 函数传递。

该代码来自于 这里。

- Jozífek Chramršt

---

'this'在'this'files[0]中没有值。必须将其更改为element.files[0]才能正常工作。 - jetlej

如何实现多文件选择？ - Shaik Nizamuddin

Answer 4

这是一个纯JavaScript的例子，用于选择图像文件，显示它、循环遍历图像属性，然后将图像从canvas重新调整大小为IMG标签，并明确将重新调整大小的图像类型设置为jpeg。

如果您右键单击顶部图像，在canvas标记中选择“保存文件”，它将默认为PNG格式。如果您右键单击下面的图像并另存为，它将默认为JPEG格式。任何宽度大于400px的文件都将缩小为400px宽，并且高度与原始文件成比例。

HTML

<form class='frmUpload'>
  <input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>

<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
<div id='allImgProperties' style="display:inline"></div>

<div id='imgTwoForJPG'></div>

脚本

<script>

window.picUpload = function(frmData) {
  console.log("picUpload ran: " + frmData);

var allObjtProperties = '';
for (objProprty in frmData) {
    console.log(objProprty + " : " + frmData[objProprty]);
    allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
};

document.getElementById('allImgProperties').innerHTML = allObjtProperties;

var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");

var img = new Image;
img.src = URL.createObjectURL(frmData);

console.log('img: ' + img);

img.onload = function() {
  var picWidth = this.width;
  var picHeight = this.height;

  var wdthHghtRatio = picHeight/picWidth;
  console.log('wdthHghtRatio: ' + wdthHghtRatio);

  if (Number(picWidth) > 400) {
    var newHeight = Math.round(Number(400) * wdthHghtRatio);
  } else {
    return false;
  };

    document.getElementById('cnvsForFormat').height = newHeight;
    console.log('width: 400  h: ' + newHeight);
    //You must change the width and height settings in order to decrease the image size, but
    //it needs to be proportional to the original dimensions.
    console.log('This is BEFORE the DRAW IMAGE');
    ctx.drawImage(img,0,0, 400, newHeight);

    console.log('THIS IS AFTER THE DRAW IMAGE!');

    //Even if original image is jpeg, getting data out of the canvas will default to png if not specified
    var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
    //The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
    document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};

</script>

这里有一个jsFiddle:

jsFiddle 选取、展示、获取属性和重新调整图片文件

在jsFiddle中，右键点击顶部的canvas图片时，不会像在IMG标签中右键点击底部的图片那样给出相同的保存选项。

- Alan Wells

Answer 5

我开始尝试使用FileReader API提供的不同功能，并创建了一个带有数据URL的IMG标签。

缺点：它在手机上无法使用，但在Google Chrome上可以正常使用。

$('input').change(function() {
    
    var fr = new FileReader;
    
    fr.onload = function() {
        var img = new Image;
        
        img.onload = function() { 
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
            $.ajax({url: img.src, async: false, success: function(result){
              $("#result").html("READING IMAGE, PLEASE WAIT...")
              $("#result").html("<img src='" + img.src + "' />");
                console.log("Finished reading Image");
          }});
        };
        
        img.src = fr.result;
    };
    
    fr.readAsDataURL(this.files[0]);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" capture="camera">
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>

（在http://jsfiddle.net/eD2Ez/530/上查看此内容）
（查看我添加的原始jsfiddle http://jsfiddle.net/eD2Ez/）

- Stardust

Answer 6

据我所知，由于Javascript/JQuery无法访问本地文件系统，因此没有简单的方法来实现这一点。HTML 5中有一些新功能，允许您检查某些元数据，例如文件大小，但我不确定是否可以获取图像尺寸。

这是一篇关于HTML 5功能的文章，以及一个解决IE问题的方法，涉及使用ActiveX控件。http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html

- Russell Durham

Answer 7

一个可工作的jQuery验证示例：

   $(function () {
        $('input[type=file]').on('change', function() {
            var $el = $(this);
            var files = this.files;
            var image = new Image();
            image.onload = function() {
                $el
                    .attr('data-upload-width', this.naturalWidth)
                    .attr('data-upload-height', this.naturalHeight);
            }

            image.src = URL.createObjectURL(files[0]);
        });

        jQuery.validator.unobtrusive.adapters.add('imageminwidth', ['imageminwidth'], function (options) {
            var params = {
                imageminwidth: options.params.imageminwidth.split(',')
            };

            options.rules['imageminwidth'] = params;
            if (options.message) {
                options.messages['imageminwidth'] = options.message;
            }
        });

        jQuery.validator.addMethod("imageminwidth", function (value, element, param) {
            var $el = $(element);
            if(!element.files && element.files[0]) return true;
            return parseInt($el.attr('data-upload-width')) >=  parseInt(param["imageminwidth"][0]);
        });

    } (jQuery));

- jenson-button-event