如何通过javascript将我在file1.html中的文件选择控件中选择的文件获取到file2.php中进行处理

Question

结构如下：

<form>
...
some stuff
...
file select
...
some stuff
...
</form>

我需要从"文件选择"发送输入数据，而不是发送"一些东西"，就我所尝试的而言，我无法在另一个表单中获取表单，所以这不是一个选项。

它的工作方式是这样的：文件选择控件一开始不显示，单击按钮会显示控件和其他内容。我需要一个按钮来提交该文件，以检查不同的内容(命名、大小等(并上传到服务器，而无需更改或重新加载窗口的其余部分。

我可以稍微改变一下布局，把文件选择的东西从表单中删除，但老板不想改变窗口的设计，删除最外面的表单将是一项艰巨的工作，因为这是网站中非常复杂的部分。

所以，正如问题所说：我能做到吗？我可以通过javascript获取文件并将其发送到另一个php文件进行处理吗？

Answer 1

实现这一点的最兼容浏览器的方法是使用一个隐藏的iframe提交表单。例如：

<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
    <input type="file" name="file_upload" />
    <input type="button" id="upload_btn" value="Upload file" />
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
    <input type="submit" value="Next step" />
</form>
<script type="text/javascript">
    var btn = document.getElementById('upload_btn');
    btn.onclick = function(){
        var form_elem = document.forms[0];
        // direct file uploads through the hidden iframe
        form_elem.action = '/test_file.php';
        form_elem.target = 'my_iframe';
        // submit the form
        form_elem.submit();
        // now reset for next step in the form
        form_elem.action = '/next_step.php';
        form_elem.target = null;
    };
</script>