blocks|key|239591|text|我同意。一旦它被上传到用户的浏览器可以访问的地方，那么就很容易获得大小。由于您需要等待图像加载，因此您需要挂接img的onload事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|239592|更新示例：|239593|//+async/promise+function+for+retrieving+image+dimensions+for+a+URL
function+imageSize(url)+{
++++const+img+=+document.createElement("img");

++++const+promise+=+new+Promise((resolve,+reject)+=>+{
++++++img.onload+=+()+=>+{
++++++++//+Natural+size+is+the+actual+image+size+regardless+of+rendering.
++++++++//+The+'normal'+`width`/`height`+are+for+the+**rendered**+size.
++++++++const+width++=+img.naturalWidth;
++++++++const+height+=+img.naturalHeight;+

++++++++//+Resolve+promise+with+the+width+and+height
++++++++resolve({width,+height});
++++++};

++++++//+Reject+promise+on+error
++++++img.onerror+=+reject;
++++});

++++//+Setting+the+source+makes+it+start+downloading+and+eventually+call+`onload`
++++img.src+=+url;

++++return+promise;
}

//+How+to+use+in+an+async+function
(async()+=>+{
++const+imageUrl+=+'http://your.website.com/userUploadedImage.jpg';
++const+imageDimensions+=+await+imageSize(imageUrl);

++console.info(imageDimensions);+//+{width:+1337,+height:+42}
})();|code-block|syntax|javascript|239594|较老的示例：|239595|var+width,+height;

var+img+=+document.createElement("img");
img.onload+=+function()+{
++++//+`naturalWidth`/`naturalHeight`+aren't+supported+on+<IE9.+Fallback+to+normal+width/height
++++//+The+natural+size+is+the+actual+image+size+regardless+of+rendering.
++++//+The+'normal'+width/height+are+for+the+**rendered**+size.
++++
++++width++=+img.naturalWidth++%7C%7C+img.width;
++++height+=+img.naturalHeight+%7C%7C+img.height;+
++++
++++//+Do+something+with+the+width+and+height
}

//+Setting+the+source+makes+it+start+downloading+and+eventually+call+`onload`
img.src+=+"http://your.website.com/userUploadedImage.jpg";|239596|entityMap^0|1J|3|1N|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

I agree. Once it is uploaded to somewhere the user's browser can access then it is pretty easy to get the size. As you need to wait for the image to load you'll want to hook into the <code>onload</code> event for <code>img</code>.
<h1>Updated example:</h1>
<pre class="lang-js prettyprint-override"><code>
// async/promise function for retrieving image dimensions for a URL
function imageSize(url) {
 const img = document.createElement(&quot;img&quot;);

 const promise = new Promise((resolve, reject) =&gt; {
 img.onload = () =&gt; {
 // Natural size is the actual image size regardless of rendering.
 // The 'normal' `width`/`height` are for the **rendered** size.
 const width = img.naturalWidth;
 const height = img.naturalHeight; 

 // Resolve promise with the width and height
 resolve({width, height});
 };

 // Reject promise on error
 img.onerror = reject;
 });

 // Setting the source makes it start downloading and eventually call `onload`
 img.src = url;

 return promise;
}

// How to use in an async function
(async() =&gt; {
 const imageUrl = 'http://your.website.com/userUploadedImage.jpg';
 const imageDimensions = await imageSize(imageUrl);

 console.info(imageDimensions); // {width: 1337, height: 42}
})();

</code></pre>
<h1>Older example:</h1>
<pre class="lang-js prettyprint-override"><code>var width, height;

var img = document.createElement(&quot;img&quot;);
img.onload = function() {
 // `naturalWidth`/`naturalHeight` aren't supported on &lt;IE9. Fallback to normal width/height
 // The natural size is the actual image size regardless of rendering.
 // The 'normal' width/height are for the **rendered** size.
 
 width = img.naturalWidth || img.width;
 height = img.naturalHeight || img.height; 
 
 // Do something with the width and height
}

// Setting the source makes it start downloading and eventually call `onload`
img.src = &quot;http://your.website.com/userUploadedImage.jpg&quot;;
</code></pre>

blocks|key|241866|text|文件只是一个文件，您需要创建一个镜像，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|241867|var+_URL+=+window.URL+%7C%7C+window.webkitURL;
$("#file").change(function+(e)+{
++++var+file,+img;
++++if+((file+=+this.files[0]))+{
++++++++img+=+new+Image();
++++++++var+objectUrl+=+_URL.createObjectURL(file);
++++++++img.onload+=+function+()+{
++++++++++++alert(this.width+%2B+"+"+%2B+this.height);
++++++++++++_URL.revokeObjectURL(objectUrl);
++++++++};
++++++++img.src+=+objectUrl;
++++}
});|code-block|syntax|javascript|241868|演示：http://jsfiddle.net/4N6D9/1/|offset|length|241869|我想你应该知道这只在几个浏览器中被支持。主要是火狐和chrome，现在也可能是opera了。|241870|P.S.+URL.createObjectURL()方法已从MediaStream接口中删除。此方法已在2013年弃用，并已被分配流到HTMLMediaElement.srcObject所取代。旧方法被删除，因为它不太安全，需要调用URL.revokeOjbectURL()来结束流。其他用户代理已弃用(Firefox)或删除(Safari)此功能。|style|CODE|241871|有关更多信息，请参阅here。|241872|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4N6D9/1/|1|https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems^0|0|0|3|S|0|0|0|5|L|U|B|1V|Q|38|L|0|A|4|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|19|8|@$I|1A|J|1B|O|P]|$I|1C|J|1D|O|P]|$I|1E|J|1F|O|P]|$I|1G|J|1H|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@$I|1J|J|1K|1|1L]]|A|$]]|$1|S|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

The file is just a file, you need to create an image like so:
<pre><code>var _URL = window.URL || window.webkitURL;
$(&quot;#file&quot;).change(function (e) {
 var file, img;
 if ((file = this.files[0])) {
 img = new Image();
 var objectUrl = _URL.createObjectURL(file);
 img.onload = function () {
 alert(this.width + &quot; &quot; + this.height);
 _URL.revokeObjectURL(objectUrl);
 };
 img.src = objectUrl;
 }
});
</code></pre>
Demo: <a href="http://jsfiddle.net/4N6D9/1/" rel="noreferrer">http://jsfiddle.net/4N6D9/1/</a>
I take it you realize this is only supported in a few browsers. Mostly firefox and chrome, could be opera as well by now.
P.S. The <code>URL.createObjectURL()</code> method has been removed from the <code>MediaStream</code> interface. This method has been deprecated in 2013 and superseded by assigning streams to <code>HTMLMediaElement.srcObject</code>. The old method was removed because it is less safe, requiring a call to <code>URL.revokeOjbectURL()</code> to end the stream. Other user agents have either deprecated (Firefox) or removed (Safari) this feature feature.
For more information, please refer <a href="https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems" rel="noreferrer">here</a>.

blocks|key|243141|text|在我看来，你必须要的完美答案是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|243142|var+reader+=+new+FileReader();

//Read+the+contents+of+Image+File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload+=+function+(e)+{

++//Initiate+the+JavaScript+Image+object.
++var+image+=+new+Image();

++//Set+the+Base64+string+return+from+FileReader+as+source.
++image.src+=+e.target.result;

++//Validate+the+File+Height+and+Width.
++image.onload+=+function+()+{
++++var+height+=+this.height;
++++var+width+=+this.width;
++++if+(height+>+100+%7C%7C+width+>+100)+{
++++++alert("Height+and+Width+must+not+exceed+100px.");
++++++return+false;
++++}
++++alert("Uploaded+image+has+valid+Height+and+Width.");
++++return+true;
++};
};|code-block|syntax|javascript|243143|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In my view the perfect answer you must required is
<pre><code>var reader = new FileReader();

//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {

 //Initiate the JavaScript Image object.
 var image = new Image();

 //Set the Base64 string return from FileReader as source.
 image.src = e.target.result;

 //Validate the File Height and Width.
 image.onload = function () {
 var height = this.height;
 var width = this.width;
 if (height &gt; 100 || width &gt; 100) {
 alert(&quot;Height and Width must not exceed 100px.&quot;);
 return false;
 }
 alert(&quot;Uploaded image has valid Height and Width.&quot;);
 return true;
 };
};
</code></pre>

blocks|key|3127143|text|function+uploadfile(ctrl)+{
++++var+validate+=+validateimg(ctrl);

++++if+(validate)+{
++++++++if+(window.FormData+!==+undefined)+{
++++++++++++ShowLoading();
++++++++++++var+fileUpload+=+$(ctrl).get(0);
++++++++++++var+files+=+fileUpload.files;


++++++++++++var+fileData+=+new+FormData();


++++++++++++for+(var+i+=+0;+i+<+files.length;+i%2B%2B)+{
++++++++++++++++fileData.append(files[i].name,+files[i]);
++++++++++++}


++++++++++++fileData.append('username',+'Wishes');

++++++++++++$.ajax({
++++++++++++++++url:+'UploadWishesFiles',
++++++++++++++++type:+"POST",
++++++++++++++++contentType:+false,
++++++++++++++++processData:+false,
++++++++++++++++data:+fileData,
++++++++++++++++success:+function(result)+{
++++++++++++++++++++var+id+=+$(ctrl).attr('id');
++++++++++++++++++++$('#'+%2B+id.replace('txt',+'hdn')).val(result);

++++++++++++++++++++$('#imgPictureEn').attr('src',+'../Data/Wishes/'+%2B+result).show();

++++++++++++++++++++HideLoading();
++++++++++++++++},
++++++++++++++++error:+function(err)+{
++++++++++++++++++++alert(err.statusText);
++++++++++++++++++++HideLoading();
++++++++++++++++}
++++++++++++});
++++++++}+else+{
++++++++++++alert("FormData+is+not+supported.");
++++++++}

++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3127144|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function uploadfile(ctrl) {
 var validate = validateimg(ctrl);

 if (validate) {
 if (window.FormData !== undefined) {
 ShowLoading();
 var fileUpload = $(ctrl).get(0);
 var files = fileUpload.files;


 var fileData = new FormData();


 for (var i = 0; i &lt; files.length; i++) {
 fileData.append(files[i].name, files[i]);
 }


 fileData.append('username', 'Wishes');

 $.ajax({
 url: 'UploadWishesFiles',
 type: "POST",
 contentType: false,
 processData: false,
 data: fileData,
 success: function(result) {
 var id = $(ctrl).attr('id');
 $('#' + id.replace('txt', 'hdn')).val(result);

 $('#imgPictureEn').attr('src', '../Data/Wishes/' + result).show();

 HideLoading();
 },
 error: function(err) {
 alert(err.statusText);
 HideLoading();
 }
 });
 } else {
 alert("FormData is not supported.");
 }

 }
</code></pre>

blocks|key|2912952|text|function+validateimg(ctrl)+{
++++var+fileUpload+=+$("#txtPostImg")[0];
++++var+regex+=+new+RegExp("([a-zA-Z0-9\s_\\.\-:])%2B(.jpg%7C.png%7C.gif)$");
++++if+(regex.test(fileUpload.value.toLowerCase()))+{
++++++++if+(typeof+(fileUpload.files)+!=+"undefined")+{
++++++++++++var+reader+=+new+FileReader();
++++++++++++reader.readAsDataURL(fileUpload.files[0]);
++++++++++++reader.onload+=+function+(e)+{
++++++++++++++++var+image+=+new+Image();
++++++++++++++++image.src+=+e.target.result;
++++++++++++++++image.onload+=+function+()+{
++++++++++++++++++++var+height+=+this.height;
++++++++++++++++++++var+width+=+this.width;
++++++++++++++++++++console.log(this);
++++++++++++++++++++if+((height+>=+1024+%7C%7C+height+<=+1100)+&&+(width+>=+750+%7C%7C+width+<=+800))+{
++++++++++++++++++++++++alert("Height+and+Width+must+not+exceed+1100*800.");
++++++++++++++++++++++++return+false;
++++++++++++++++++++}
++++++++++++++++++++alert("Uploaded+image+has+valid+Height+and+Width.");
++++++++++++++++++++return+true;
++++++++++++++++};
++++++++++++}
++++++++}+else+{
++++++++++++alert("This+browser+does+not+support+HTML5.");
++++++++++++return+false;
++++++++}
++++}+else+{
++++++++alert("Please+select+a+valid+Image+file.");
++++++++return+false;
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2912953|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function validateimg(ctrl) {
 var fileUpload = $(&quot;#txtPostImg&quot;)[0];
 var regex = new RegExp(&quot;([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$&quot;);
 if (regex.test(fileUpload.value.toLowerCase())) {
 if (typeof (fileUpload.files) != &quot;undefined&quot;) {
 var reader = new FileReader();
 reader.readAsDataURL(fileUpload.files[0]);
 reader.onload = function (e) {
 var image = new Image();
 image.src = e.target.result;
 image.onload = function () {
 var height = this.height;
 var width = this.width;
 console.log(this);
 if ((height &gt;= 1024 || height &lt;= 1100) &amp;&amp; (width &gt;= 750 || width &lt;= 800)) {
 alert(&quot;Height and Width must not exceed 1100*800.&quot;);
 return false;
 }
 alert(&quot;Uploaded image has valid Height and Width.&quot;);
 return true;
 };
 }
 } else {
 alert(&quot;This browser does not support HTML5.&quot;);
 return false;
 }
 } else {
 alert(&quot;Please select a valid Image file.&quot;);
 return false;
 }
}
</code></pre>

blocks|key|2912955|text|将该函数附加到输入类型文件/onchange="validateimg(this)"/的onchange方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912956|+++function+validateimg(ctrl)+{+
++++++++var+fileUpload+=+ctrl;
++++++++var+regex+=+new+RegExp("([a-zA-Z0-9\s_\\.\-:])%2B(.jpg%7C.png%7C.gif)$");
++++++++if+(regex.test(fileUpload.value.toLowerCase()))+{
++++++++++++if+(typeof+(fileUpload.files)+!=+"undefined")+{
++++++++++++++++var+reader+=+new+FileReader();
++++++++++++++++reader.readAsDataURL(fileUpload.files[0]);
++++++++++++++++reader.onload+=+function+(e)+{
++++++++++++++++++++var+image+=+new+Image();
++++++++++++++++++++image.src+=+e.target.result;
++++++++++++++++++++image.onload+=+function+()+{
++++++++++++++++++++++++var+height+=+this.height;
++++++++++++++++++++++++var+width+=+this.width;
++++++++++++++++++++++++if+(height+<+1100+%7C%7C+width+<+750)+{
++++++++++++++++++++++++++++alert("At+least+you+can+upload+a+1100*750+photo+size.");
++++++++++++++++++++++++++++return+false;
++++++++++++++++++++++++}else{
++++++++++++++++++++++++++++alert("Uploaded+image+has+valid+Height+and+Width.");
++++++++++++++++++++++++++++return+true;
++++++++++++++++++++++++}
++++++++++++++++++++};
++++++++++++++++}
++++++++++++}+else+{
++++++++++++++++alert("This+browser+does+not+support+HTML5.");
++++++++++++++++return+false;
++++++++++++}
++++++++}+else+{
++++++++++++alert("Please+select+a+valid+Image+file.");
++++++++++++return+false;
++++++++}
++++}|code-block|syntax|javascript|2912957|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Attach the function to the onchange method of the input type file /onchange="validateimg(this)"/

<pre><code> function validateimg(ctrl) { 
 var fileUpload = ctrl;
 var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
 if (regex.test(fileUpload.value.toLowerCase())) {
 if (typeof (fileUpload.files) != "undefined") {
 var reader = new FileReader();
 reader.readAsDataURL(fileUpload.files[0]);
 reader.onload = function (e) {
 var image = new Image();
 image.src = e.target.result;
 image.onload = function () {
 var height = this.height;
 var width = this.width;
 if (height &lt; 1100 || width &lt; 750) {
 alert("At least you can upload a 1100*750 photo size.");
 return false;
 }else{
 alert("Uploaded image has valid Height and Width.");
 return true;
 }
 };
 }
 } else {
 alert("This browser does not support HTML5.");
 return false;
 }
 } else {
 alert("Please select a valid Image file.");
 return false;
 }
 }
</code></pre>

blocks|key|2912959|text|这是检查尺寸的最简单方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912960|let+img+=+new+Image()
img.src+=+window.URL.createObjectURL(event.target.files[0])
img.onload+=+()+=>+{
+++alert(img.width+%2B+"+"+%2B+img.height);
}|code-block|syntax|javascript|2912961|检查特定的大小。以100+x+100为例|2912962|let+img+=+new+Image()
img.src+=+window.URL.createObjectURL(event.target.files[0])
img.onload+=+()+=>+{
+++if(img.width+===+100+&&+img.height+===+100){
++++++++alert(`Nice,+image+is+the+right+size.+It+can+be+uploaded`)
++++++++//+upload+logic+here
++++++++}+else+{
++++++++alert(`Sorry,+this+image+doesn't+look+like+the+size+we+wanted.+It's+
+++${img.width}+x+${img.height}+but+we+require+100+x+100+size+image.`);
+++}++++++++++++++++
}|2912963|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This is the easiest way to check the size 

<pre><code>let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () =&gt; {
 alert(img.width + " " + img.height);
}
</code></pre>

Check for specific size. Using 100 x 100 as example

<pre><code>let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () =&gt; {
 if(img.width === 100 &amp;&amp; img.height === 100){
 alert(`Nice, image is the right size. It can be uploaded`)
 // upload logic here
 } else {
 alert(`Sorry, this image doesn't look like the size we wanted. It's 
 ${img.width} x ${img.height} but we require 100 x 100 size image.`);
 } 
}
</code></pre>

blocks|key|243160|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|243161|++++const+ValidateImg+=+(file)+=>{
++++++++let+img+=+new+Image()
++++++++img.src+=+window.URL.createObjectURL(file)
++++++++img.onload+=+()+=>+{
++++++++++++if(img.width+===+100+&&+img.height+===100){
++++++++++++++++alert("Correct+size");
++++++++++++++++return+true;
++++++++++++}
++++++++++++alert("Incorrect+size");
++++++++++++return+true;
++++++++}
++++}|code-block|syntax|javascript|243162|243163|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> const ValidateImg = (file) =&gt;{
 let img = new Image()
 img.src = window.URL.createObjectURL(file)
 img.onload = () =&gt; {
 if(img.width === 100 &amp;&amp; img.height ===100){
 alert("Correct size");
 return true;
 }
 alert("Incorrect size");
 return true;
 }
 }</code></pre>
</div>
</div>

blocks|key|2913056|text|您可以在不显示图像的情况下执行预览图像的步骤，这在所有浏览器上都受支持。下面的js代码展示了如何检查width和height：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2913057|var+file+=+e.target.files[0];
if+(/\.(jpe?g%7Cpng%7Cgif)$/i.test(file.name))+{
++++var+reader+=+new+FileReader();
++++reader.addEventListener("load",+function+()+{
++++++++var+image+=+new+Image();
++++++++image.src+=+this.result+as+string;
++++++++image.addEventListener('load',+function+()+{
++++++++++++console.log(`height:+${this.height},+width:+${this.width}`);
++++++++});
++++++++++++++++
++++},+false);
++++++++++++
++++reader.readAsDataURL(file);
}|code-block|syntax|javascript|2913058|基于Mozilla+docs|2913059|2913060|+readAsDataURL方法用于读取指定Blob或File的内容。当读操作完成时，readyState变为完成，并且loadend被触发。此时，result属性将数据包含为data:将文件数据表示为base64编码字符串的URL。|blockquote|2913061|2913062|2913063|并且还列出了。|2913064|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL^0|F|2|1E|5|1K|6|0|0|2|C|0|0|0|1|D|M|4|R|4|22|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|D]|$9|18|A|19|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|1A|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|1B|8|@]|E|@$9|1C|A|1D|1|1E]]|F|$]]|$1|N|3|-4|5|6|7|1F|8|@]|E|@]|F|$]]|$1|O|3|P|5|Q|7|1G|8|@$9|1H|A|1I|B|D]|$9|1J|A|1K|B|D]|$9|1L|A|1M|B|D]|$9|1N|A|1O|B|D]]|E|@]|F|$]]|$1|R|3|-4|5|6|7|1P|8|@]|E|@]|F|$]]|$1|S|3|-4|5|6|7|1Q|8|@]|E|@]|F|$]]|$1|T|3|U|5|6|7|1R|8|@]|E|@]|F|$]]|$1|V|3|-4|5|6|7|1S|8|@]|E|@]|F|$]]]|W|$X|$5|Y|Z|10|F|$11|12]]]]

You can do the steps for previewing the image without showing it which is supported on all browsers. Following js code shows you how to check the <code>width</code> and <code>height</code> :
<pre><code>var file = e.target.files[0];
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
 var reader = new FileReader();
 reader.addEventListener(&quot;load&quot;, function () {
 var image = new Image();
 image.src = this.result as string;
 image.addEventListener('load', function () {
 console.log(`height: ${this.height}, width: ${this.width}`);
 });
 
 }, false);
 
 reader.readAsDataURL(file);
}
</code></pre>
Based on <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL" rel="nofollow noreferrer">Mozilla docs</a>:
<blockquote>
The <code>readAsDataURL</code> method is used to read the contents of the specified
<code>Blob</code> or <code>File</code>. When the read operation is finished, the readyState
becomes DONE, and the loadend is triggered. At that time, the <code>result</code>
attribute contains the data as a data: URL representing the file's
data as a base64 encoded string.
</blockquote>
And the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL#Browser_compatibility" rel="nofollow noreferrer">browser compatibility</a> is listed too.

blocks|key|2913072|text|在我的例子中，我还需要防止表单被提交，所以以下是对我有效的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2913073|preventDefault将停止表单操作，然后我们在onload函数中检查图像的大小和尺寸。|2913074|如果一切正常，我们允许提交。|2913075|如果用户仍然尝试提交包含无效图像的表单，则submit按钮将被禁用，因此在输入有效图像后，我还必须重新启用submit按钮。|2913076|const+validateMaxImageFileSize+=+(e)+=>+{
++e.preventDefault();
++const+el+=+$("input[type='file']")[0];

++if+(el.files+&&+el.files[0])+{
++++const+file+=+el.files[0];

++++const+maxFileSize+=+5242880;+//+5+MB
++++const+maxWidth+=+1920;
++++const+maxHeight+=+1080;

++++const+img+=+new+Image();
++++img.src+=+window.URL.createObjectURL(file);
++++img.onload+=+()+=>+{
++++++if+(file.type.match('image.*')+&&+file.size+>+maxFileSize)+{
++++++++alert('The+selected+image+file+is+too+big.+Please+choose+one+that+is+smaller+than+5+MB.');
++++++}+else+if+(file.type.match('image.*')+&&+(img.width+>+maxWidth+%7C%7C+img.height+>+maxHeight))+{
++++++++alert(`The+selected+image+is+too+big.+Please+choose+one+with+maximum+dimensions+of+${maxWidth}x${maxHeight}.`);
++++++}+else+{
++++++++e.target.nodeName+===+'INPUT'
++++++++++?+(e.target.form.querySelector("input[type='submit']").disabled+=+false)
++++++++++:+e.target.submit();
++++++}
++++};
++}
};

$('form.validate-image-size').on('submit',+validateMaxImageFileSize);
$("form.validate-image-size+input[type='file']").on('change',+validateMaxImageFileSize);|code-block|syntax|javascript|2913077|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In my case, I needed to also prevent the form from being submited, so here is the solution that worked for me.
The preventDefault will stop the form action, then we check the size and dimensions of the image in the onload function.
If all good, we allow the submit.
As the submit button gets disabled if a user still tries to submit the form with an invalid image, I also had to re-able the submit button once a valid image is inputted.
<pre><code>const validateMaxImageFileSize = (e) =&gt; {
 e.preventDefault();
 const el = $(&quot;input[type='file']&quot;)[0];

 if (el.files &amp;&amp; el.files[0]) {
 const file = el.files[0];

 const maxFileSize = 5242880; // 5 MB
 const maxWidth = 1920;
 const maxHeight = 1080;

 const img = new Image();
 img.src = window.URL.createObjectURL(file);
 img.onload = () =&gt; {
 if (file.type.match('image.*') &amp;&amp; file.size &gt; maxFileSize) {
 alert('The selected image file is too big. Please choose one that is smaller than 5 MB.');
 } else if (file.type.match('image.*') &amp;&amp; (img.width &gt; maxWidth || img.height &gt; maxHeight)) {
 alert(`The selected image is too big. Please choose one with maximum dimensions of ${maxWidth}x${maxHeight}.`);
 } else {
 e.target.nodeName === 'INPUT'
 ? (e.target.form.querySelector(&quot;input[type='submit']&quot;).disabled = false)
 : e.target.submit();
 }
 };
 }
};

$('form.validate-image-size').on('submit', validateMaxImageFileSize);
$(&quot;form.validate-image-size input[type='file']&quot;).on('change', validateMaxImageFileSize);
</code></pre>

I have a JPS with a form in which a user can put an image:

<pre><code>&lt;div class="photo"&gt;
 &lt;div&gt;Photo (max 240x240 and 100 kb):&lt;/div&gt;
 &lt;input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/&gt;
&lt;/div&gt;
</code></pre>

I have written this js:

<pre><code>function checkPhoto(target) {
 if(target.files[0].type.indexOf("image") == -1) {
 document.getElementById("photoLabel").innerHTML = "File not supported";
 return false;
 }
 if(target.files[0].size &gt; 102400) {
 document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
 return false;
 }
 document.getElementById("photoLabel").innerHTML = "";
 return true;
}
</code></pre>

which works fine to check file type and size. Now I want to check image width and height but I cannot do it. 
I have tried with <code>target.files[0].width</code> but I get <code>undefined</code>. With other ways I get <code>0</code>.
 Any suggestions?

Check image width and height before upload with Javascript

我有一个JPS，它有一个表单，用户可以在其中放置图像：<div class="photo"> <div>Photo (max 240x240 and 100 kb):</div> <input type="file" name="photo" id="photoInput" onchange="checkP...

问使用Javascript上传前检查图像的宽度和高度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript上传前检查图像的宽度和高度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript上传前检查图像的宽度和高度
EN