上载和升级：HTML文件表单输入-CSDN博客

From a UI perspective, uploading files from a web page is handled by the file form input. But until very recently, this method had serious issues: it wasn’t supported on mobile.

从UI角度来看，从网页上载文件是由file形式输入处理的。但是直到最近，这种方法才出现了严重的问题：移动设备不支持该方法。

Starting this month, the file input is supported natively in iOS9 and Android 5, making uploads a lot easier for everyone. Over time, it’s likely that this support will also substantially replace the native apps that traditionally filled this role. This makes now the right time to look at the form element in depth.

从这个月开始，该file输入在iOS9和Android原生5的支持，使得上传了很多方便大家。随着时间的流逝，这种支持很可能还将大大取代传统上扮演该角色的本机应用程序。现在，这是时候深入了解表单元素了。

基础 (The Basics)

The element itself couldn’t be much simpler:

元素本身再简单不过了：

<input type="file">

Of course, this will usually be associated with a bunch of markup, both to allow the input data to be processed, and for accessibility:

当然，这通常将与一堆标记相关联，既可以处理输入数据，又可以访问：

<form method="post" action="upload.php" formenctype="multipart/form-data">
    <label for="upload">Upload your picture:</label>
    <input type="file" name="upload" id="upload">
</form>

Which creates:

哪个创建：

Like the color input and other form elements, the file input will use the native OS for dialog boxes and UI when the Select file button is clicked.

与color输入和其他表单元素一样，单击“ Select file按钮时， file输入将使用本机OS来显示对话框和UI。

局限性 (Limitations)

You can limit the file input to accepting certain kinds of files by specifying their MIME type in the accept attribute, with an optional wildcard (*) to allow files of a particular type:

您可以通过在accept属性中指定其MIME类型，并使用可选的通配符(*)来允许特定类型的文件，从而将file输入限制为接受某些类型的文件：

<input type="file" accept="image/*" name="upload" id="upload">

Files that don’t match the criteria (in the example above, anything that is not an image file) will be grayed out or disabled in the file dialog.

不符合条件的文件(在上面的示例中，不是图像文件的任何文件)将在文件对话框中变灰或禁用。

iOS currently supports the wildcard option, but not a specific file type, such as image/png.

iOS当前支持通配符选项，但不支持特定的文件类型，例如image/png 。

You can also accept multiple files at once by using the word as a “boolean” attribute:

您还可以通过将该单词用作“布尔”属性来一次接受多个文件：

<input type="file" multiple accept="image/*" name="upload" id="upload">

iOS does not currently support the multiple attribute, and only allows the user to upload files from particular stores in the device: a live photo from the camera, the photo roll, and online storage services like iCloud and Dropbox.

iOS当前不支持multiple属性，仅允许用户上传设备中特定商店的文件：相机实时照片，照片胶卷以及iCloud和Dropbox等在线存储服务。

客制化 (Customization)

The file input isn’t terribly attractive, and doesn’t easily allow CSS customisation (although it is possible). There’s a small trick you can use to turn off the input entirely and substitute your own UI, while keeping the functionality of the element intact. First, create a file input, and next to it, a button element:

文件输入并不是很吸引人，并且不容易允许CSS自定义 ( 尽管可能 )。您可以使用一个小技巧来完全关闭输入并替换您自己的UI，同时保持元素的功能完整。首先，创建file输入，然后在其旁边创建一个button元素：

<label for="fileUpload" accept="image/*">Upload your image</label>
<input type="file" id="fileUpload">

Then add some JavaScript:

然后添加一些JavaScript ：

var fileUpload = document.getElementById("fileUpload"),
uploadLabel = document.querySelector("label[for='fileUpload']"),
fileInsert = document.createElement("button");
fileInsert.id = "fileSelector";
fileInsert.innerHTML = uploadLabel.innerHTML;
fileUpload.parentNode.insertBefore(fileInsert, fileUpload.nextSibling)
fileUpload.style.display = "none";
uploadLabel.style.display = "none";
fileInsert.addEventListener('click', function(e){
    e.preventDefault();
    fileUpload.click();
}, false);

The result can be seen at the top of this article: the script hides the file input and substitutes a <button> element; clicking on the button will initiate the file dialog by creating a click event on the hidden element. The button can then be styled however you wish with CSS:

结果可以在本文的顶部看到：脚本隐藏了文件输入并替换了<button>元素；单击按钮将通过在隐藏元素上创建click事件来启动文件对话框。然后可以根据需要使用CSS设置按钮的样式：

#fileSelector {
    font-size: 1.3rem; padding: .5rem 1rem;
    background: hsl(50,100%,50%);
    font-family: Avenir, sans-serif;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

第一步 (A First Step)

Of course, this is only the client-facing front-end UI aspect of uploading a file: there are many different methods for actually handling the file, from the HTML5 File API in JavaScript to PHP. A simple File API version is shown above; I’ll go into far more detail about that in the next article.

当然，这只是上传文件的面向客户端的前端UI方面：有许多实际处理文件的方法，从JavaScript中HTML5 File API到PHP 。上面显示了一个简单的File API版本。在下一篇文章中，我将对此进行更详细的介绍。

It should also be mentioned that there are other UI possibilities for dealing with file uploads, including drag-and-drop interfaces, which I’ll also cover in a future article.

还应该提到的是，还有其他处理文件上传的UI可能性，包括拖放界面，我将在以后的文章中介绍。