如何在页面之间传递input =“file”数据

I'm trying to implement a file upload button, where once a file is selected, the user is directed to another page with a form to fill in extra data before submitting.

我正在尝试实现文件上传按钮,一旦选择了文件,用户就会被定向到另一个带有表单的页面,以便在提交之前填写额外的数据。

Is this possible? To pass the input value over to another page? I noticed that the "value" of the form item is not the true value (i.e. prefixed with "C:\fakepath\"), so a simple setValue() on the form will probably not work.

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

If it makes any difference, I am using angular and ui-router. And when I say change page, I really mean change state.

如果它有任何区别,我使用角度和ui路由器。当我说更改页面时,我的意思是改变状态。

2 个解决方案

#1

You can pass the File object from the HTMLInputElement.files as a parameter to the state: $state.go('form', {'file': file}).

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

I've created a fiddle to demonstrate this solution. The first state prompts the user to select a file, then redirects him to a second state passing the file as a parameter. In this example the file name is just printed out but you could easily read the file as well.

我创造了一个小提琴来演示这个解决方案。第一个状态提示用户选择文件,然后将其重定向到将文件作为参数传递的第二个状态。在此示例中,文件名刚打印出来,但您也可以轻松读取该文件。

#2

Try adding the form as a modal pop-up instead:

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

  $(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" />

#1