文件输入“接受”属性 - 是否有用？ [英] File input 'accept' attribute - is it useful?

问题描述

在html下实现文件上传相当简单，但我注意到有一个'accept'属性可以添加到< input type =file...> 标记。

这个属性是否有用作为限制文件上传到图像的方式？什么是最好的方式来使用它？

另外，有没有办法限制文件类型，最好在文件对话框中，为html文件输入标签？ p>

解决方案 accept 属性非常有用。这是浏览器只显示当前输入所允许的文件的暗示。虽然它通常可以被用户覆盖，但是它有助于缩小用户的搜索结果，所以他们可以准确地找到他们想要的内容，而不必筛选上百种不同的文件类型。

用法

注意：这些示例是基于当前规范编写的，所有（或任何）浏览器。该规范也可能在将来发生变化，这可能会打破这些例子。

  h1 {font-size：1em;保证金：1em 0; } h1〜h1 {border-top：1px solid #ccc; padding-top：1em;匹配所有的图片文件（图片/文件）。 





href =https://html.spec.whatwg.org/multipage/forms.html#attr-input-accept =noreferrer>来源）

可以指定 accept 属性为用户代理提供
提示接受哪些文件类型。 / p>

如果指定，属性必须包含
一组逗号分隔的标记，
中的每一个必须是
ASCII不区分大小写 a>
匹配以下之一：

字符串 audio / *

• 表示声音文件被接受。

video / *

• I表示视频文件被接受。
h3>




• 表示图像文件已被接受。
  




不带参数的有效MIME类型
$ b



• 表示接受指定类型的文件。







第一个字符为U + 002E FULL STOP字符（。）的字符串






• 表示接受指定文件扩展名的文件。

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?

解决方案

The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input. 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.

h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }

<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

From the HTML Specification (source)

The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.

If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:

The string audio/*

• Indicates that sound files are accepted.

The string video/*

• Indicates that video files are accepted.

The string image/*

• Indicates that image files are accepted.

A valid MIME type with no parameters

• Indicates that files of the specified type are accepted.

A string whose first character is a U+002E FULL STOP character (.)

• Indicates that files with the specified file extension are accepted.

这篇关于文件输入“接受”属性 - 是否有用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！