记住并重新填充文件输入

时间:2013-12-12 07:41:29

标签: javascript html html5 file-upload fileapi

  

注意:

     

下面的答案反映了2009年旧版浏览器的状态。现在,您可以在2017年通过JavaScript实际设置文件输入元素的值。

     

有关详细信息和演示,请参阅此问题的答案:
How to set file input value programatically (i.e.: when drag-dropping files)?

我有一个网站,允许用户多次上传文件进行处理。目前我只有一个文件输入,但我希望能够记住用户选择并在屏幕上显示。

我想知道怎么做是在用户选择文件后我会记住他们的选择并使用在重新加载页面时预先选择的文件重新显示文件输入。我需要知道的是如何记住和重新填充文件输入。

我也对不使用文件输入的方法持开放态度(如果可能的话)。

我正在使用JQuery

3 个答案:

答案 0 :(得分:1)

在表单上创建一个输入字段。当用户选择文件时,将结果复制到此字段,如:

jQuery('#inFile').change(
 function(){ jQuery('#inCopy').val( jQuery('#inFile').val() ); }
);

实际上,结果并未完全复制,而是复制“C:/ fakepath / SELECTED_FILE_NAME”。虽然不允许设置文件输入的值,但是可以设置文本输入字段的值,而不是“C:/ fakepath /”,因为服务器准备表单。

现在,当服务器返回表单时,请检查文本输入字段。如果它以“C:/ fakepath /”开头,那么用户必须选择一个新文件,因此上传他们的新选择。如果没有,那么用户选择了之前的选择,这应该不是问题,因为根据原始问题,之前的选择已经上传并且应该(至少通过适当的编程,它可能)仍然是在服务器上。

答案 1 :(得分:0)

冒着踩到GitaarLAB提供的巨大信息的风险,我可能会建议DaveWalley非常接近为这个问题提供切实可行的解决方案。你们两个都非常感谢我,谢谢。

我的回家信息是,

  1. 文件输入提供单行道。它坐在那里等待处理你的下一个上传。这就是它的全部功能。它接收
  2. 文件输入标签附近的div或只读文本表单输入可以执行服务。即,它可用于告诉用户,"以下是当前上传的内容:" - 需要从服务器端逻辑填充要显示的文件名。
  3. 所以一个基本用例是:

    • 用户通过网页上的表单输入上传文件
    • 服务器端逻辑存储文件
    • 在Ajax循环或网页重新加载时,服务器端代码标识要在div中写入的fileName字符串,"这里是当前上传的"
    • 也可以重新显示文件输入,以便欢迎用户上传其他文件。

    您可能需要做更多的工作来处理" * required"验证,但这是另一个故事。

答案 2 :(得分:-1)

如果你真正想要的只是对文件数据的临时持久性,例如如果页面上有错误或者你想要一个确认页面,那么在将数据提交到数据库之前,这通常是完成将文件临时放置并将数据保存在隐藏字段中。

这不会重新填充文件输入字段。但您也可以只输入输入文件的名称并将其放在文件输入框旁边。

像这样:

<input type=hidden name="filename" value="<?php echo $filename; ?>" />
<input type="file" name="uploadfile" size="50" />

<?php if (!empty($filename)) echo $filename; ?>