javascript / jquery上传的图片文件的大小和尺寸 [英] javascript/jquery size and dimension of uploaded image file

问题描述

我需要以千字节显示图像大小以及使用javascript / jquery的维度（高度，宽度）。我遇到过几个类似的帖子，但没有人可以帮助我。我有两套代码，分开工作。

这是html代码：

 < span id =preview>< / span> 
< input type =fileid =fileonchange =displayPreview（this.files）;/> 
  

这段代码检查文件大小&预览图像：

  function onFileLoad（e）{
 $（'＃preview'）。append（'< ; img src ='+ e.target.result +'/>'）; 
 
函数displayPreview（files）{
 var reader = new FileReader（）; 
 reader.onload = onFileLoad; 
 reader.readAsDataURL（files [0]）; 
 fileSize = Math.round（files [0] .size / 1024）; 
 alert（文件大小是+ fileSize +kb）; 
 
 
 
 
 
 
这段代码检查文件大小： 
 
 
  var _URL = window.URL || window.webkitURL; （（file = this.files [0]））{
（＃file）。change（function（e）{
 var file，img; 
 img = new Image（）; 
 img.onload = function（）{
 alert（this.width ++ this.height）; 
}; 
 img.src = _URL.createObjectURL（file）; 
} 
}）; 
  
请帮我把这些代码放在一起，同时显示尺寸和尺寸。
解决方案
使用这两个代码所需要做的就是在 displayPreview 功能。您可以创建一个图像对象，它将追加到 preview ，并在同一个函数中查找大小，宽度和高度。
  var _URL = window.URL || window.webkitURL; 
函数displayPreview（files）{
 var file = files [0] 
 var img = new Image（）; 
 var sizeKB = file.size / 1024; 
 img.onload = function（）{
 $（'＃preview'）。append（img）; 
 alert（Size：+ sizeKB +KB\\\
Width：+ img.width +\\\
Height：+ img.height）; 
} 
 img.src = _URL.createObjectURL（file）; 
} 
  
 
I need to display the image size in kilobyte and the dimension (height, width) using javascript/jquery. I came across few similar posts, but none could help me. I have two set of codes, that work separately. I can't figure out how to put them together.

This is the html code:
<span id="preview"></span>
<input type="file" id="file" onchange="displayPreview(this.files);"/>
This piece of code checks for file size & previews the image:
function onFileLoad(e) { 
    $('#preview').append('<img src="'+e.target.result +'"/>');  
}
function displayPreview(files) {
    var reader = new FileReader();
    reader.onload = onFileLoad;
    reader.readAsDataURL(files[0]);
    fileSize = Math.round(files[0].size/1024);
    alert("File size is "+fileSize+" kb");
}
This piece of code checks for file size:
var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            alert(this.width + " " + this.height);
        };
        img.src = _URL.createObjectURL(file);
    }
});
Please help me to put these codes together and display both the size and dimension together.
解决方案
All you have to do to use the two codes is combine them in the displayPreview function. You can create the image object that will append to the preview and find it's size, width, and height all in the same function.
var _URL = window.URL || window.webkitURL;
function displayPreview(files) {
   var file = files[0]
   var img = new Image();
   var sizeKB = file.size / 1024;
   img.onload = function() {
      $('#preview').append(img);
      alert("Size: " + sizeKB + "KB\nWidth: " + img.width + "\nHeight: " + img.height);
   }
   img.src = _URL.createObjectURL(file);
}


                        
这篇关于javascript / jquery上传的图片文件的大小和尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！