使用 javascript 在上传文件时执行两个操作。文件和文件详细信息不会传递到 javascript 函数

Question

我正在使用此代码上传文件。我必须执行两个提交操作。所以我调用了一个 javascript 函数 onclick()。但是，文件和使用表单输入的文件详细信息都不会传输到 javascript 函数。我在这里缺少什么？

<jsp:include page="template-top.jsp" />
<script type="text/javascript">
function onSubmit(){
    document.forms["frm"].action="http://192.168.1.53/api.php/submit.xml";
    document.forms["frm"].target="_blank";
    document.forms["frm"].submit();
    document.forms["frm"].action="directuploadsubmit.do";
    document.forms["frm"].target="_blank";
    document.forms["frm"].submit();
}
</script>
<style type="text/css">

td.boldtext{
font-weight: bold;
font-family:Helvetica,sans-serif;
font-size:16pt;
color:black;
width:200;
}

</style>
<%@ page import="databeans.Submit" %>
<%@ page import="databeans.User"  %>
<%@ page import="databeans.Sandboxes"  %>

<%
    User user = (User) session.getAttribute("user");
%>

<div style="visibility:hidden">
<iframe NAME = "iframe1" WIDTH="40" HEIGHT="40"></iframe>
</div>

<form id="frm" name="frm" method="POST" enctype="multipart/form-data">
<table>
    <tr> <td class="boldtext">
    Direct Submission
    </td>
    </tr>
</table>
<table>
            <tr>
            <td colspan="2">
            <font color="red">Complete notes as Case#:Notes (Example: <font color="blue">"Case12345:test sample"</font>)
            </font>
            </td>
            </tr>
            <tr>
            <td width=50>
            <font color="black" face="Helvetica,sans-serif">File:* </font></td>
            <td><input type="file" name="file" value="${filename}" size="100"/></td>
            </tr>
            <tr>
            <td width=50>
            </td>
            <td><input type="hidden" name="email" readonly="readonly" value="<%=user.getUserName() %>" size="100"/></td>
            </tr>
            <tr>
            <td width=50>
            <font color="black" face="Helvetica,sans-serif">Notes: </font></td>
            <td><input type="text" name="notes" value="" size="100"/></td>
            </tr>
            <tr>
            <td width=50>
            <font color="black" face="Helvetica,sans-serif">Sandbox: </font></td>
            <td><select name="sandboxes[]">
            <option value="00-0C-29-CF-B8-A6">VMSB1 - Win7</option>
            <option value="00-0C-29-0A-AB-9A">VMSB2 - WinXP</option>
            </select>
            </td>
            </tr>
            <tr>
            <td width=50 colspan="2" align="left"><font face="Helvetica,sans-serif" color="FF0000">All * marked fields are mandatory    
            </font>
            </td>
            </tr>
            <tr>
            <td width=50 colspan="2" align="center">
        <!--    <input type="submit" name="submit" value="Submit" onclick= "this.form.target='_blank'; return true;">
        -->
        <input type="submit" name="button" value="Submit" onClick="onSubmit()">
            </td>
            </tr>
</table>
</form>
<jsp:include page="template-bottom.jsp" />

Answer 1

您应该将 onSubmit 函数绑定到表单，而不是 submit 按钮。

<script type="text/javascript">
function onSubmit(){
    //First form submission:
    document.forms["frm"].action = "http://192.168.1.53/api.php/submit.xml";
    document.forms["frm"].submit(); //Submit #1

    //Change the action
    document.forms["frm"].action = "directuploadsubmit.do";
}
</script>
...

<form action="directuploadsubmit.do" onsubmit="onSubmit();" name="frm" method="POST" enctype="multipart/form-data" target="_blank">
... rest of page

当用户禁用 JavaScript 时，默认操作是仅在新窗口中将表单提交到 directuploadsubmit.do。启用 JavaScript 后，会发生以下情况：

1. action 属性更改为 submit.xml。
2. 表单提交（使用 .submit()
3. action 属性被更改（回到 direcuploadsubmit.do
4. 表单提交，因为用户点击了提交按钮。^[1]

^[1] 当用户单击提交时，会发生以下事件：

1. 触发 submit 事件（如果JavaScript 已启用）
2. 表单已提交到 action 中提到的页面。

Answer 2

您必须通过调用 onclick="onSubmit(); return false;" 来阻止表单或提交按钮的默认操作

这不会让您的表单被提交并允许您提前处理请求