7

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

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

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

4

2 回答 2

4

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

  1. 选择上传文件时输入加载文件到内存？
    • 不，它只是保存文件路径。我使用进程监视器然后选择近200Mb的文件，chrome和firefox都不吃更多内存，或者读磁盘；我什至可以在单击提交按钮之前删除此文件。
  2. enctype的form对输入的影响如何？
    • application/x-www-form-urlencoded并且text/plain似乎忽略了文件输入；只multipart/form-data触发浏览器从文件路径读取文件并发送。（要了解更多 enctype 的工作原理，请参阅此处：Enctype='multipart/form-data' 是什么意思？）
  3. 服务器端接收数据时做什么？
    • 如上所述，我只关心 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如果需要保存文件，我们必须在脚本结束之前使用。

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

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

于 2013-08-02T18:01:41.473 回答