JavaScript verification upload picture size [foreground processing]

Source: Internet
Author: User

Requirements Analysis:

When uploading pictures, if you do not limit the size of uploaded images, the consequences are very serious. So how can we solve a difficult problem? There are two ways of doing this:
1) Background processing: That is, Ajax Post submitted to the background, the picture uploaded to the server, and then get the image size to do processing.
2) Foreground processing: That is, using JavaScript to get the image size.
Obviously the first way, it's not good. Because the need to upload files to the server first, if the file is very large, in addition to the Internet is not very fast, need to wait for a long time, the symptoms do not cure.

Function Analysis:

Here I only introduce the different practices of IE and Firefox two browsers.
IE6:
Keyword: fileSize onreadystatechange complete
The file size can be obtained from the FileSize property of the IMG object in IE6, but the correct value of this FileSize property is set in the complete of the onReadyStateChange event, which is

 Function Sizecheck (img) {if (Img.readystate = = "complete") {alert (img.filesize); } }

FireFox3.0:
Keyword: getasdataurl () fileSize
In Firefox for security reasons, unable to get the full path of uploading pictures, only get the image name. However, the browser provides an interface such as nsidomfile, so you need to get the processed path through Getasdataurl (), but the path does not affect the image src display.
Nsidomfile Interface:

Domstring getasbinary (); Domstring Getasdataurl (); Domstring Getastext (in domstring encoding); <input type= "File" Name= "uploadimg" onchange= "Javascript:checkfilechange (this);"     Size= "/> function checkfilechange (obj) {var img = document.getElementById (" img ");     IMG.SRC = Obj.files[0].getasdataurl (); alert (obj.files[0].filesize); }

These are the two different browser processing methods, then how to bring them together? I'll post my little examples below, where I use jquery to facilitate and get objects

<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  


JavaScript verification upload picture size [foreground processing]

Related Article

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.