gpt4 book ai didi

javascript - 单击提交按钮时重置文件上传

转载 作者:数据小太阳 更新时间:2023-10-29 03:51:21 25 4
gpt4 key购买 nike

我在我的 asp 网站中使用上传功能。所以我正在使用文件输入类型。但是这个控件添加了一个默认的上传按钮浏览器和一个在 Internet Explorer 中选择文件后显示路径的文本框。我不想显示浏览按钮等。所以我所做的是添加一个按钮“附加文件”,并且我编写了脚本“triggerFileUpload”函数,我让它点击上传控件。所以现在当我点击“附加文件”按钮时,浏览文件窗口出现并且可以选择要上传的文件。但是当我点击提交按钮时,文件上传控件被重置并且文件没有上传。错误是单击提交按钮时文件控件变为空。它只发生在 Internet Explorer 中。所以请帮我解决这个问题。下面是可以显示我在 IE 中遇到的问题的代码。如果我也使用 asp:FileUpload 控件,也会出现同样的问题。 (我的计划是隐藏文件控件,只向用户显示附加文件按钮)。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function triggerFileUpload() {
document.getElementById("FileUploaddd2").click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button2" type="button" onclick="triggerFileUpload()" value="Attach a File" />
<input type="file" id="FileUploaddd2" runat="Server" />
<br />
<asp:Button ID="btnSubmit" runat="server" BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px"
Text="Submit" />
</div>
</form>
</body>
</html>

下载示例代码 here

更新

重现我面临的错误

1) 运行我在下载链接中给出的项目

2) 在 Internet explorer 中测试-任何版本

3)点击附加文件按钮(不是在浏览器上,它是为了使可见的假的,这里显示只是为了示例目的)

4)在出现的窗口中浏览文件并点击确定

5) 现在点击保存按钮。

单击保存按钮时 btnsave_Click 函数应该触发,但它没有触发。如果我​​再次单击保存按钮 btnsave_Click 被触发。但是这次上传控件不会选择文件。您可以在浏览控件也提供了文本框(只是为了显示这个我让浏览控件可见)

那么现在质疑为什么第一次没有触发btnsave_Click?

最佳答案

问题是 IE 不允许您通过 javascript 提交文件,用户必须单击文件输入。这是一个已知问题,在此处描述:

当通过脚本强制 click() 事件打开文件输入时,IE 不会让您提交表单。
如果您通过自己的鼠标单击文件输入(我们不想要的),IE 会让您提交表单。
Open file input dialog and upload onchange possible in IE?

还有这里:File Upload Using Javascript returns 'Access Denied' Error With Stylized to a button

因此,您必须欺骗用户,使文件输入透明并将您的按钮放在文件输入下方。当用户单击您的按钮时,他们将改为单击文件输入。

使用 css(可能需要对其进行调整)您的标记应如下所示:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.fileContainer {
overflow: hidden;
position: relative;
}

#FileUploaddd2 {
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
left: -130px;
}

#Button2 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<label class="fileContainer">
<input id="Button2" type="button" value="Attach a File" />
<input type="file" id="FileUploaddd2" runat="Server" />
</label>
<br />
<br />
<asp:Button ID="btnSubmit" runat="server" BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px"
Text="Submit" />
</div>
</form>
</body>
</html>

在后面的代码中你可以捕获提交的文件

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
Dim file As System.Web.HttpPostedFile = FileUploaddd2.PostedFile
If Not file Is Nothing Then
'Save file?
End If
End Sub

编辑:如果您想在标签中显示文件名,您可以执行以下操作:

在输入文件的更改事件中调用一个 jsfunction:

<input type="file" id="FileUploaddd2" runat="Server" onchange="setlabelvalue();" />

添加标签显示文件名:

<asp:Label ID="lblFileName" runat ="server" Text=""></asp:Label>

添加setlabelvalue() js函数:

function setlabelvalue() {
var filename = document.getElementById("FileUploaddd2").value;
var lastIndex = filename.lastIndexOf("\\");

if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('<%=lblFileName.ClientID%>').innerHTML = filename;
}

关于javascript - 单击提交按钮时重置文件上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18755355/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com