{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 爱死公子算了 的问题《File input 'accept' attribute - is it usef》','https://www.manongdao.com/q-3378.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Implementing a file upload under html is fairly simple, but I just noticed that there is an 'accept' attribute that can be added to the <input type="file" ...> tag.
Is this attribute useful as a way of limiting file uploads to images, etc? What is the best way to use it?
Alternatively, is there a way to limit file types, preferably in the file dialog, for an html file input tag?
It is supported by Chrome. It's not supposed to be used for validation, but for type hinting the OS. If you have an
accept="image/jpeg"attribute in a file upload the OS can only show files of the suggested type.In 2015 the only way I found to make it work for both Chrome and Firefox is to put all possible extensions you want to support, including variants:
Problem with FireFox: Using the
image/jpegmime type FireFox will only show.jpgfiles, very strange as if the common.jpegwas not ok...Whatever you do, be sure to try with files having many different extensions. Maybe it even depends on the OS ...
I suppose
acceptis case insensitive, but maybe not in every browser.Here is the MDN docs about accept:
The
acceptattribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the currentinput. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.Usage
Note: These examples were written based on the current specification and may not actually work in all (or any) browsers. The specification may also change in the future, which could break these examples.
From the HTML Specification (source)
Yes, it is extremely useful in browsers that support it, but the "limiting" is as a convenience to users (so they are not overwhelmed with irrelevant files) rather than as a way to prevent them from uploading things you don't want them uploading.
It is supported in
Here is a list of content types you can use with it, followed by the corresponding file extensions (though of course you can use any file extension):
It's been a few years, and Chrome at least makes use of this attribute. This attribute is very useful from a usability standpoint as it will filter out the unnecessary files for the user, making their experience smoother. However, the user can still select "all files" from the type (or otherwise bypass the filter), thus you should always validate the file where it is actually used; If you're using it on the server, validate it there before using it. The user can always bypass any client-side scripting.
Back in 2008 this wasn't important because of the lack of mobile OS'es but now quite important thing.
When you set accepted mime types, then in for example Android user is given system dialog with apps which can provide him the content of mime which file input accepts, what is great because navigating through files in file explorer on mobile devices is slow and often stressful.
One important thing is that some mobile browsers (based on Android version of Chrome 36 and Chrome Beta 37) does not support app filtering over extension(s) and multiple mime types.