Upload image js determine image size and format compatibility IE, js image size

Upload image js determine image size and format compatibility IE, js image size

Js Code:

$ (". Head"). change (function () {var val = $ (this). val (); if (! Val. match (/. jpg |. gif |. png |. bmp/I) {imgtype = false; alert ('invalid image format! ');} Else {if (FileReader) {var reader = new FileReader (), file = this. files [0]; reader. onload = function (e) {var image = new Image (); image. src = e.tar get. result; image. onload = function () {if (image. width & gt; 128 | image. height> 128) {fill = false; alert ("the Avatar size should be between X") ;}}; reader. readAsDataURL (file);} else {// This is ie9 version $ (". preview_size_fake "). show (); var objPreviewSizeFake = $ (". preview_size_fake "). get (0); var fileupload = $ (this ). get (0); fileupload. select (); fileupload. blur (); path = document. selection. createRange (). text; if (/"\ w \ W "/. test (path) {path = path. slice (1,-1);} objPreviewSizeFake. filters. item ('dximagetransform. microsoft. alphaImageLoader '). src = path; if (objPreviewSizeFake. offsetWidth> 128 | objPreviewSizeFake. offsetHeight> 128) {fill = false; alert ("the Avatar size should be between X");} document. selection. empty ();}}});

Css code (this must be written. If it is not written, it will not work in ie)

. Preview_size_fake {/* This object is only used to obtain the original size of the image under IE, and has no other purpose */filter: progid: DXImageTransform. microsoft. alphaImageLoader (sizingMethod = image); height: 1px; visibility: hidden; overflow: hidden; display: none ;}

Html code:

<input class="head" type="file" name="avatar">

How to Use js to determine the image size on the client when uploading images and a prompt is displayed

<Input type = "text" size = "4" value = "10" name = "fileSizeLimit" id = "fileSizeLimit"/> K
<Input type = "file" name = "file1" id = "file1" size = "40" onchange = "changeSrc (this)"/>


// The front is the webpage
<Script type = "text/javascript">
Var oFileChecker = document. getElementById ("fileChecker ");

Function changeSrc (filePicker)
{
OFileChecker. src = filePicker. value; // read the image
}

// This is very important. Determine whether the image is fully read; otherwise, the image size is inaccurate.
OFileChecker. onreadystatechange = function ()
{
If (oFileChecker. readyState = "complete ")
{
CheckSize ();
}
}

Function checkSize ()
{
Var limit = document. getElementById ("fileSizeLimit"). value * 1024;

If (oFileChecker. fileSize> limit)
{
Alert ("too large ");
}
Else
{
Alert ("OK ");
}
}
</Script>

JS compatible with ie ff chrome to determine the image file size

How can you determine whether the CSS class or ID of the image is better? Different images are displayed only when CSS is used.
Supplement:
Try this sentence and find it online.
<Script>
Function getFileSize (o ){
X = window. XMLHttpRequest? New window. XMLHttpRequest: new ActiveXObject ("MSxml2.XMLHTTP ");
X. open ("HEAD", o. src, false );
X. send ();
Alert ("Size:" + x. getResponseHeader ("Content-Length "));
}
</Script>

<Input type = "button" value = "GET Size" onclick = "getFileSize (document. getElementById ('use')"/>
From UC Browser