Input type= ' file ' limit upload file type

Source: Internet
Author: User

When the front-end and background data docking, can not avoid the use of Ajax HTTP request, the common request for two post and get; however, the requirements of the common Post request is file upload, maybe I said that the file upload everyone think so easy ah, nothing, just a few lines JS Code to get it done. Yes, simple file upload can be directly using the Formdata () object to upload the file, if the problem is just so simple, perhaps everyone has encountered the restrictions of the upload file type, do not know if you have noticed such a simple way to filter file types, the following direct code:

1, JS implementation: JS implementation of the upload file type limit is to allow the upload of the file suffix names are all listed, as an array of storage, and then through the array of IndexOf method, take the picture as an example code as follows

var fileType = [' jpg ', ' png ', ' jpeg ', ' gif ', ' BMP ']

var file = E.target.files[0]

if (filetype.indexof (file) < 0) {

Alert (' does not support this type of file ')

}

How to use the IndexOf () method of an array can be seen in my blog post: http://www.cnblogs.com/novice007/p/7077914.html

2, CSS implementation: Do not know that everyone has not noticed a detail, that is, I chose the file, if not I set the type of the page will be the box to tell me do not support the format of the file, then the problem comes, since the file is not supported in this format, then I can open the file to choose the time, Not I want the format of the file will not show, then I can not choose, at the same time the page will not be so annoying let me go to re-select the format it wants to do it? The answer is yes, and you don't need any code, just a simple HTML page: The code looks like this:

<input type = "File" accept= "Image/jpg, Image/png, Image/jpeg, image/gif" >

In the Input File box, add the Accept attribute, the attribute restricts the file type, then when the input box is entered into the local Disk selection file, not the file type specified by the Accept attribute then you will not see these files in the open local disk file.

This is a good way to solve the problem of file type limitation in recent projects, so write this blog post to share with you, if there are shortcomings, welcome to communicate with me: qq:1540302851

Input type= ' file ' limit upload file type

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.