HTML 文件输入如何工作？答案

【问题标题】：How HTML File input works?HTML 文件输入如何工作？
【发布时间】：2013-08-04 01:45:29
【问题描述】：

我不是在问如何上传文件。

我只是想知道，当您单击 html 文件元素时，它如何显示本地系统文件夹。

我们可以用按钮和输入等任何其他 html 元素来做到这一点吗？如果不是，文件有什么特别之处？它如何显示系统目录？

【问题讨论】：

它与浏览器有关，与 HTML 无关。您对纯 HTML（和 Javascript）所做的任何事情都不会让您直接访问客户端的文件系统。您需要一些第三方软件，如 Flash 或 ActiveX 才能做到这一点。从服务器的角度来看，当您上传文件时，您只是在发出一个包含八位字节流的 HTTP 请求。
谢谢。但问题仍然存在。如果是浏览器而不是 html 为什么只有 File 可以执行？
@zod 与浏览器自动将自己的样式应用到页面上的 HTML 元素的原因相同——这就是浏览器使用 file 的 type 属性呈现和输入的方式。 IE：你不能让文本显示为 ••••• 除非你使用密码字段，（或 javascript 并替换字符，但这不是一回事。）

【解决方案1】：

注意：我不会准确描述浏览器如何处理文件输入，但我会逐步列出我所做的工作及其结果，以便更好地理解输入；尽管它可能无法帮助您了解其内部机制，但它可以帮助您在使用它时不会感到害怕或困惑。在我的实验中，我将使用 HTML、Apache + PHP 和 CakePHP、Firefox 和 Chrome 来比较它在实际编程中的使用方式。让我们开始吧:)

选择上传文件时输入加载文件到内存？
- 不，它只是保存文件路径。我使用进程监视器然后选择近200Mb的文件，chrome和firefox都不吃更多内存，或者读磁盘；我什至可以在点击提交按钮之前删除这个文件。
表单的enctype如何影响输入？
- application/x-www-form-urlencoded 和 text/plain 似乎忽略了文件输入；只有multipart/form-data触发浏览器从文件路径读取文件并发送。（要了解更多 enctype 的工作原理，请参阅此处：What does enctype='multipart/form-data' mean?）
服务器端接收数据时做什么？
- 如上所述，我只关心PHP，而PHP给我们的是：

// Upload 1 file Array (
    [<input name in file input tag>] => Array
        (
            [name] => <same as the name of selected to upload file>
            [type] => <type>
            [tmp_name] => <path of file in tmp folder will explain below>
            [error] => <0: error, maybe because of file size too large, 1: success>
            [size] => <size of file in bytes>
        )    
)
// Upload multiple files (input name must be <someName>[])
Array
(
    [<input name in file input tag>] => Array
        (
            [name] => [<array of name>]
            [type] => [<array of type>]
            [tmp_name] => [<array of tmp path>]
            [error] => [<array of error>]
            [size] => [<array of size>]
        )

)

浏览器向 Apache 发送请求（包含文件）； Apache 将请求转发给 PHP； PHP 从请求中提取文件并保存到我们可以在 [tmp_name] 中看到的 tmp 文件夹中的文件。在PHP文件的末尾，它删除了临时文件，所以如果需要保存文件，我们必须在脚本结束之前使用move_uploaded_file。

CakePHP 如何处理上传的文件？
- 这与 PHP 所做的相同，只是将其放在 $this->request 中，我们必须确保它们的名称必须是 data[] 或者只是使用 $this->Form->form("")
我可以在将所选文件提交到服务器之前预览图像或对所选文件执行某些操作吗？
- 是的。可以监听文件输入的onchange事件；通过它的DOM，我们可以访问FileList，然后从它我们可以在File中访问；使用 FileReader（几乎当前的浏览器支持）我们可以将其作为数据 url 读取...（可以在此处查看详细信息：how to preview a image before and after upload?）

【讨论】：

【解决方案2】：

唯一可以让你访问文件系统的html元素是input（文件类型），因为浏览器允许它显示一个打开的对话框，只有浏览器可以这样做，任何脚本都没有办法用于访问系统目录的 API。出于安全原因，目前没有其他方法可以以这种方式访问文件系统（通过对话框）；通过 HTML5 在本地保存数据、强制下载保存对话框或打印对话框再次是浏览器控制的操作，但您可以从网页调用它们。

【讨论】：