Input type= ' file ' limit upload file type

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