Javascript verification of uploaded image size [frontend processing] _ javascript skills

Source: Internet
Author: User
When uploading images, if you do not limit the size of the uploaded images, the consequences are very serious. There are two ways to solve this problem: background processing and foreground processing. Requirement Analysis:

When uploading images, if you do not limit the size of the uploaded images, the consequences are very serious. So how can we solve a difficult problem? There are two methods:
1) background processing: Submit ajax post to the background, upload the image to the server, and obtain the image size for processing.
2) frontend processing: use Javascript to get the image size.
Obviously, the first method is not good. Because the file needs to be uploaded to the server first. If the file is large, the Internet access is not very fast. It takes a long time to fix the problem.

Function Analysis:

Here I will only introduce the different practices of IE and FireFox.
IE6:
Keyword: fileSize onreadystatechange complete
In IE6, the file size can be obtained through the fileSize attribute of the Img object, but the correct value of this fileSize attribute is created in the complete of the onreadystatechange event, that is

 function sizeCheck(img) { if(img.readyState == "complete") { alert(img.fileSize); } }

FireFox3.0:
Keyword: getAsDataURL () fileSize
It is safe in FireFox. You cannot obtain the complete path of the uploaded image. You can only obtain the image name. However, the browser provides the nsIDOMFile interface, so you need to get the processed path through getAsDataURL (), but this path does not affect the image src display.
NsIDOMFile interface:

DOMString getAsBinary(); DOMString getAsDataURL(); DOMString getAsText(in DOMString encoding);  function checkFileChange(obj) { var img = document.getElementById("img"); img.src = obj.files[0].getAsDataUrl(); alert(obj.files[0].fileSize); }

These are the processing methods of two different browsers. How can we combine them? I will post a small example below, in which I will use JQuery to facilitate and obtain objects.

   
  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.