JS limit upload picture size do not use control in local implementation _ basics

Before a file is uploaded, it is usually by file name to determine whether the file type is legal, but it is difficult to detect the size of the file unless it is local or uses a control. Use JS can easily solve the word problem, JS in the upload image before the size of this can be achieved with JavaScript, effect ...//allow uploading picture file size
The specific code is as follows

Copy Code code as follows:

<script language=javascript>
var imgobj=new Image (); Create an Image Object
var allimgext= ". Jpg|. Jpeg|. Gif|. bmp|. Png| " All Picture format types
var fileobj,imgfilesize,imgwidth,imgheight,fileext,errmsg,filemsg,hascheked,isimg//global variable picture-related properties
The following are restricted variables
var allowext= ". Jpg|. Gif|. doc|. Txt| "///Allow uploaded file types?" for unrestricted each extension, add a "|" lowercase letter to indicate
var allowext=0
var allowimgfilesize=70; Allow upload picture file size 0 is unrestricted: KB
var allowimgwidth=500; The width of the picture allowed to upload? For unrestricted units: px (pixel)
var allowimgheight=500; The height of the picture allowed to upload? For unrestricted units: px (pixel)
Haschecked=false;
function Checkproperty (obj)//Detect image Properties
{
Fileobj=obj;
if (errmsg!= "")//Detect if error information is returned for the correct image file and reset
{
ShowMsg (Errmsg,false);
return false; Return
}
if (imgobj.readystate!= "complete")//If the image is not loaded complete for loop detection
{
SetTimeout ("Checkproperty (Fileobj)", 500);
return false;
}
Imgfilesize=math.round (imgobj.filesize/1024*100)/100;//Gets the size of the picture file
Imgwidth=imgobj.width//Get the width of the picture
Imgheight=imgobj.height; Get the height of the picture
Filemsg= "\ n picture size:" +imgwidth+ "*" +imgheight+ "px";
filemsg=filemsg+ "\ n picture file size:" +imgfilesize+ "Kb";
filemsg=filemsg+ "\ n picture file name extension:" +fileext;
if (allowimgwidth!=0&&allowimgwidtherrmsg=errmsg+ "\ nthe picture width exceeds the limit. Please upload a file width less than "+allowimgwidth+" px, the current picture width of "+imgwidth+" PX;
if (allowimgheight!=0&&allowimgheighterrmsg=errmsg+ "\ n picture height exceeded limit. Please upload a height of less than "+allowimgheight+" px files, the current picture height of "+imgheight+" PX;
if (allowimgfilesize!=0&&allowimgfilesizeerrmsg=errmsg+ "\ nthe picture file size exceeds the limit. Please upload a file less than "+allowimgfilesize+" KB, the current file size is "+imgfilesize+" KB;
if (errmsg!= "")
ShowMsg (Errmsg,false);
Else
ShowMsg (filemsg,true);
}
Imgobj.onerror=function () {errmsg= ' \ n picture is malformed or the picture is corrupted! '}
function ShowMsg (MSG,TF)//display hint information tf=true display file information tf=false display error message msg-information content
{
Msg=msg.replace ("\ n", "<li>");
Msg=msg.replace (/\n/gi, "<li>");
if (!TF)
{
Document.all.uploadbutton.disabled=true;
fileobj.outerhtml=fileobj.outerhtml;
msglist.innerhtml=msg;
Haschecked=false;
}
Else
{
Document.all.uploadbutton.disabled=false;
if (isimg)
Previewimg.innerhtml= " '
Else
Previewimg.innerhtml= "Non-picture document";
msglist.innerhtml=msg;
Haschecked=true;
}
}
function Checkext (obj)
{
Errmsg= "";
Filemsg= "";
Fileobj=obj;
Isimg=false;
Haschecked=false;
Previewimg.innerhtml= "Preview Area";
if (obj.value== "") return false;
Msglist.innerhtml= "Document information processing ...";
Document.all.uploadbutton.disabled=true;
Fileext=obj.value.substr (Obj.value.lastIndexOf (".")). toLowerCase ();
if (Allowext!=0&&allowext.indexof (fileext+ "|") ==-1)//Determine if file type is allowed to upload
{
Errmsg= "\ n This file type is not allowed to upload. Please upload "+allowext+" type of file, the current file type is "+fileext;"
ShowMsg (Errmsg,false);
return false;
}
if (Allimgext.indexof (fileext+ "|")! =-1)///If picture file, then do image information processing
{
Isimg=true;
Imgobj.src=obj.value;
Checkproperty (obj);
return false;
}
Else
{
Filemsg= "\ n file name extension:" +fileext;
ShowMsg (filemsg,true);
}
}
function Switchuptype (TF)
{
if (TF)
Str= ' <input type= "file" Name= "File1" onchange= "Checkext (This)" style= "width:180px;" > '
Else
Str= ' <input type= "text" name= "file1" onblur= "Checkext (This)" style= "width:180px;" > '
DOCUMENT.ALL.FILE1.OUTERHTML=STR;
Document.all.uploadbutton.disabled=true;
Msglist.innerhtml= "";
}
</script>
<form enctype= "Multipart/form-data" method= "POST" onsubmit= "return haschecked;" >
<fieldset style= "width:372; height:60;padding:2px; " >
<legend><font color= "#FF0000" > Photo source </font></legend>
<input type= "Radio" name= "Radio1" Checked onclick= "Switchuptype (true);" > Local <input type= "Radio" name= "Radio1" onclick= "Switchuptype" (false); " > Remote: <input type= "file" Name= "File1" onchange= "Checkext (This)" style= "width:180px;" > <input type= "Submit" id= "Uploadbutton" value= "Start uploading" disabled>
<div style= "border:1 solid #808080 background: #E0E0E0; Width100%;height:20px;color: #606060;p adding:5px;" >
<table border= "0" ><tr><td width= "id=" previewimg "> Preview area </td><td id=" MsgList "valign=" Top "></td></tr></table>
</div>
</fieldset>
</form>

< end >
Note that the reader can copy the above code directly, save as an HTML file, preview JS limit upload image size effect