如何在页面之间传递 input="file" 数据答案

【问题标题】：How do I pass input="file" data between pages如何在页面之间传递 input="file" 数据
【发布时间】：2015-09-03 06:57:56
【问题描述】：

我正在尝试实现一个文件上传按钮，一旦选择了一个文件，用户就会被引导到另一个页面，其中包含一个表单以在提交之前填写额外的数据。

这可能吗？将输入值传递到另一个页面？我注意到表单项的“值”不是真正的值（即以“C:\fakepath\”为前缀），因此表单上的简单 setValue() 可能不起作用。

如果有什么不同，我使用的是 angular 和 ui-router。当我说改变页面时，我的意思是改变状态。

【问题讨论】：

你不能。允许这样做将允许任何人指定用户系统上任何文件的路径。例如一个令人难以置信的巨大安全问题。将文件上传到一个表单上，将其存放在系统上的某个安全位置，然后在提交第二个表单时将其拉出。
@MarcB -- 由于 OP 在 SPA 中工作，您可能只需在输入更改时将文件数据存储在服务中，然后从该服务中获取。（或者那会丢失？）
使用变量并存储HTMLInputElement.files 属性的值。完成。
@Terry One 不使用文件输入的 value 属性。 OP 需要的是 files 属性，它返回一个 FileList 对象。这是一个 SPA 应用程序，该变量可以在其他状态下使用。
您可以使用 File API 读取 blob 中的文件

标签： javascript jquery angularjs

【解决方案1】：

您可以将File 对象从HTMLInputElement.files 作为参数传递给状态：$state.go('form', {'file': file})。

我创建了一个fiddle 来演示此解决方案。第一个状态提示用户选择一个文件，然后将他们重定向到第二个状态，将文件作为参数传递。在此示例中，文件名只是打印出来，但您也可以轻松读取文件。

【讨论】：

完美。谢谢，这是最简单的解决方案。

【解决方案2】：

尝试将表单添加为模式弹出窗口：

  $(function() {
    $("#dialog").dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $("#file").change(function() {
      $("#dialog").dialog("open");
    });
  });

<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<div id="dialog" title="Basic dialog">
  <p>Put your form here, for example.</p>
</div>

<input type="file" id="file" />

【讨论】：