HTML文件输入如何工作?

时间:2013-08-02 17:27:53

标签: html file dom file-upload file-io

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

我只是想知道当你点击一个html文件元素时,它会显示出来 本地系统文件夹。

我们可以使用任何其他html元素,如按钮和输入吗?如果没有,文件有什么特别之处?它如何显示系统目录?

2 个答案:

答案 0 :(得分:2)

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

  1. 选择上传文件时输入加载文件到内存?
    • 不,只是保存文件路径。我使用进程监视器然后选择文件近200Mb,chrome和firefox都不要吃更多的内存,或者读取磁盘;我甚至可以在点击提交按钮之前删除此文件。
  2. 表单的输入效果如何?
    • application/x-www-form-urlencodedtext/plain似乎是IGNORE文件输入;只有multipart/form-data触发浏览器从文件路径读取文件并发送。 (有关enctype工作的详细信息,请参阅此处:What does enctype='multipart/form-data' mean?
  3. 接收数据时服务器端做了什么?
    • 如上所述,我只关心PHP,PHP给我们的是:
  4. // 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文件夹中的文件,我们可以在[tmp_name]中看到该文件夹​​。在PHP文件的末尾,它删除了temp,因此如果需要保存文件,我们必须在脚本结束之前使用move_uploaded_file

    1. CakePHP如何处理上传的文件?
      • 它与PHP在$ this-&gt;请求中所做的相同,我们必须确保他们的名字必须是data []或者只是使用$ this-&gt; Form-&gt; form( &#34;&#34)
    2. 我可以在将图像提交到服务器之前预览图像或对所选文件执行某些操作吗?
      • 是。您可以监听文件输入的onchange事件;通过它,我们可以访问FileList然后从它我们可以访问File;使用FileReader(在几乎当前的浏览器中支持),我们可以将其读作数据网址...(可在此处查看详细信息:how to preview a image before and after upload?

答案 1 :(得分:0)

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