如何在页面之间传递"file"输入的数据

Question

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

这是否可行？将输入值传递到另一页？我注意到表单项目的"value"不是真正的值(即带有"C:\fakepath\"前缀)，所以简单的setValue()在表单上可能行不通。

如果有任何区别，我正在使用angular和ui-router。当我说改变页面时，我真的是指改变状态。

- kennyg

---

不行。允许这样做将允许任何人指定用户系统上任何文件的路径，这会带来极大的安全问题。在一个表单上上传文件，将其安全地储存到系统某处，然后在提交第二个表单时再取出来。 - undefined

@MarcB -- 由于OP正在使用SPA，你可能只需在输入更改时将文件数据存储在一个服务中，然后从该服务中获取。（或者会丢失吗？） - undefined

使用一个变量，并存储HTMLInputElement.files属性的值。完成。 - undefined

@Terry，不要使用文件输入的value属性。OP需要的是返回一个FileList对象的files属性。这是一个SPA应用程序，该变量可以在其他状态中使用。 - undefined

你可以使用File API以blob的形式读取文件。 - undefined

Answer 1

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

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

- just95

---

太好了。谢谢，这是最简单的解决方案。 - undefined

Answer 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" />

- omikes