JS collection: Image upload_restricted format, type, size

Source: Internet
Author: User
Upload an image using the HTML file control, and use js to determine and limit the image format, type, and size. 1 function checkfile (F, P)
2 {
3 // determine the image size
4var IMG = NULL;
5img = Document. createelement ("IMG ");
6document. Body. insertadjacentelement ("beforeend", IMG );
7img. style. Visibility = "hidden ";
8img. src = F;
9var imgwidth = IMG. offsetwidth;
10var imgheight = IMG. offsetheight;
11if (P. Name = "upfile_photo1 ")
12 {
13if (imgwidth! = 68 | imgheight! = 68)
14 {
15 alert ("the size of the thumbnail should be 68X68 ");
16}
17}
18if (P. Name = "upfile_photo2 ")
19 {
20if (imgwidth! = 257 | imgheight! = 351)
21 {
22 alert ("the image size should be 257x351 ");
23}
24}
25if (P. Name = "upfile_photo3 ")
26 {
27if (imgwidth! = 800 | imgheight! = 800)
28 {
29 alert ("the size of the big image should be 800x800 ");
30}
31}
32 // determine the image type
33if (! /\. (GIF | JPG | JPEG | BMP) $/. Test (f ))
34 {
35 alert ("Image Watermark watermark is one of .gif, JPEG, JPG, and BMP ")
36 return false;
37}
38 return true;
39}

Related HTML code

1 <input type = "file" id = "upfile_photo1" runat = "server" name = "upfile_photo1"
2 size = "35" onpropertychange = "checkfile (this. value, this)"> thumbnail <br/>
3 <input type = "file" id = "upfile_photo2" runat = "server" name = "upfile_photo2"
4 size = "35" onpropertychange = "checkfile (this. value, this)"> center chart <br/>
5 <input type = "file" id = "upfile_photo3" runat = "server" name = "upfile_photo3"
6 size = "35" onpropertychange = "checkfile (this. value, this)"> large image <br/>

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.