HTML5 File selection box (various types) __html

<input type= "file"/> Only show the specified file type when browsing< input type = "File" accept = "Application/msword" >< br >< br > Accept Property List < br >

1.accept= "Application/msexcel"
2.accept= "Application/msword"
3.accept= "Application/pdf"
4.accept= "Application/poscript"
5.accept= "Application/rtf"
6.accept= "Application/x-zip-compressed"
7.accept= "Audio/basic"
8.accept= "Audio/x-aiff"
9.accept= "Audio/x-mpeg"
10.accept= "Audio/x-pn/realaudio"
11.accept= "Audio/x-waw"
12.accept= "Image/gif"
13.accept= "Image/jpeg"
14.accept= "Image/tiff"
15.accept= "Image/x-ms-bmp"
16.accept= "IMAGE/X-PHOTO-CD"
17.accept= "Image/x-png"
18.accept= "Image/x-portablebitmap"
19.accept= "Image/x-portable-greymap"
20.accept= "Image/x-portable-pixmap"
21.accept= "Image/x-rgb"
22.accept= "Text/html"
23.accept= "Text/plain"
24.accept= "Video/quicktime"
25.accept= "VIDEO/X-MPEG2"
26.accept= "Video/x-msvideo"

This can be implemented to select specific data types, but there are compatibility issues, I was in the test only opera,chrome can use, Firefox and IE are incompatible

Well, let's test it here:

I just want word.

If you want to support a variety of types here, such as Kingsoft Office and Microsoft Office's different extensions, then you can put multiple attributes in accept:

<form> <input type= "file" name= "pic" id= "pic" accept= "image/gif, Image/jpeg"/></form>

If you do not restrict the format of the image, you can write as: accept= "image/*". It's also possible.

OK, let's test it:

I just want GIF, BMP okay, as long as the picture I'm going to

Well, the test is successful, with Opera,chrome, because accept is also a new feature of HTML5, so the support of Firefox and IE is thin, so that we wait for their acceptance
Test for a long time, found that GIF and BMP together is not able to get their collection, carefully observed in the written order of their "File selection type":

It's like the following picture:

If we do not define the format of input file, then the file type is the full file *.*, if we define our own, then the file type will be the same as we selected, but at this time if we want to see other files can still be through the file type Drop-down box, To choose the type of extra you like, to put it simply, it is a simple act of screening in accordance with our subjective will, and if we do not choose the image/* but several parallel words will be arranged according to the above situation, such as the picture on my input is like this:

<form> <input type= "file" name= "pic" id= "pic" accept= "image/gif, Image/x-ms-bmp, image/bmp"/></form >