Before a file is uploaded, the file type is determined by the file name. However, it is difficult to check the file size unless it is local or a control is used. Javascript can be used to easily solve word problems. JS can be used to determine the size before uploading an image. This can be implemented using javascript. The effect... // allows uploading the image file size.
The Code is as follows:
Copy codeThe Code is as follows: <script language = javascript>
Var ImgObj = new Image (); // create an Image object
Var AllImgExt = ". jpg |. jpeg |. gif |. bmp |. png |" // All image formats
Var FileObj, ImgFileSize, ImgWidth, ImgHeight, FileExt, ErrMsg, FileMsg, HasCheked, IsImg // global variable image attributes
// The following are restricted Variables
Var AllowExt = ". jpg |. gif |. doc |. txt |" // What types of files can be uploaded? An "|" lowercase letter is required for each extension.
// Var AllowExt = 0
Var AllowImgFileSize = 70; // the size of the image file that can be uploaded is 0, and the Unit is KB.
Var AllowImgWidth = 500; // What is the width of the image that can be uploaded? Unlimited unit: px (pixels)
Var AllowImgHeight = 500; // What is the height of the image that can be uploaded? Unlimited unit: px (pixels)
HasChecked = false;
Function CheckProperty (obj) // checks image attributes.
{
FileObj = obj;
If (ErrMsg! = "") // Check whether an error message is returned and reset for the correct image file
{
ShowMsg (ErrMsg, false );
Return false; // return
}
If (ImgObj. readyState! = "Complete") // performs cyclic detection if the image is not loaded
{
SetTimeout ("CheckProperty (FileObj)", 500 );
Return false;
}
ImgFileSize = Math. round (ImgObj. fileSize/1024*100)/100; // obtain the image file size
ImgWidth = ImgObj. width // obtain the image width.
ImgHeight = ImgObj. height; // obtain the Image height.
FileMsg = "\ n image size:" + ImgWidth + "*" + ImgHeight + "px ";
FileMsg = FileMsg + "\ n image file size:" + ImgFileSize + "Kb ";
FileMsg = FileMsg + "\ n Image File Extension:" + FileExt;
If (AllowImgWidth! = 0 & AllowImgWidth ErrMsg = ErrMsg + "\ n the image width exceeds the limit. Upload a file whose width is less than "+ AllowImgWidth +" px. The current image width is "+ ImgWidth +" px ";
If (AllowImgHeight! = 0 & AllowImgHeight ErrMsg = ErrMsg + "\ n the image height exceeds the limit. Upload a file with a height less than "+ AllowImgHeight +" px. The current image height is "+ ImgHeight +" px ";
If (AllowImgFileSize! = 0 & AllowImgFileSize ErrMsg = ErrMsg + "\ n the image file size exceeds the limit. Upload a file smaller than "+ AllowImgFileSize +" KB. The current file size is "+ ImgFileSize +" KB ";
If (ErrMsg! = "")
ShowMsg (ErrMsg, false );
Else
ShowMsg (FileMsg, true );
}
ImgObj. onerror = function () {ErrMsg = '\ n incorrect image format or damaged image! '}
Function ShowMsg (msg, tf) // display prompt message 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-image files ";
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 = "processing file information ...";
Document. all. UploadButton. disabled = true;
FileExt = obj. value. substr (obj. value. lastIndexOf ("."). toLowerCase ();
If (AllowExt! = 0 & AllowExt. indexOf (FileExt + "|") =-1) // determine whether the file type can be uploaded
{
ErrMsg = "\ n this file type cannot be uploaded. Upload a file of the "+ AllowExt +" type. The current file type is "+ FileExt;
ShowMsg (ErrMsg, false );
Return false;
}
If (AllImgExt. indexOf (FileExt + "| ")! =-1) // if the image file is used, the image information is processed.
{
IsImg = true;
ImgObj. src = obj. value;
CheckProperty (obj );
Return false;
}
Else
{
FileMsg = "\ n File 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"> image 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 upload "disabled>
<Div style = "border: 1 solid #808080; background: # E0E0E0; width100 %; height: 20px; color: #606060; padding: 5px;">
<Table border = "0"> <tr> <td width = "60" id = "PreviewImg"> preview area </td> <td id = "MsgList" valign =" top "> </td> </tr> </table>
</Div>
</Fieldset>
</Form>
<End>
Note that you can directly copy the above Code and save it as an HTML file. Preview The JS file to limit the size of the uploaded image.
