如何在页面之间传递input =“file”数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在页面之间传递input =“file”数据相关的知识,希望对你有一定的参考价值。
我正在尝试实现文件上传按钮,一旦选择了文件,用户就会被定向到另一个页面,其中包含一个表单,以便在提交之前填写额外的数据。
这可能吗?要将输入值传递到另一个页面?我注意到表单项的“值”不是真值(即前缀为“C: fakepath ”),因此表单上的简单setValue()可能不起作用。
如果它有任何区别,我使用角度和ui路由器。当我说更改页面时,我的意思是改变状态。
答案
您可以将File
对象从htmlInputElement.files
作为参数传递给状态:$state.go('form', {'file': file})
。
我创建了一个fiddle来演示这个解决方案。第一个状态提示用户选择文件,然后将它们重定向到第二个状态,将文件作为参数传递。在此示例中,文件名刚刚打印出来,但您也可以轻松读取该文件。
另一答案
尝试将表单添加为模式弹出窗口:
$(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" />
以上是关于如何在页面之间传递input =“file”数据的主要内容,如果未能解决你的问题,请参考以下文章
Ionic 4 - 如何使用navCtrl或Router服务在页面之间传递数据
如何使用 OnNavigatedFrom 和 OnNavigatedTo 事件在页面之间传递数据