IT *_*her 9 javascript forms asp.net internet-explorer file-upload
我在我的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>
在此处下载示例代码
UPDATE
重现我面临的错误
1)运行我在下载链接中给出的项目
2)在Internet Explorer中测试 - 任何版本
3)单击附加文件按钮(不在浏览中,它旨在使可见的虚假,此处仅出于示例目的)
4)浏览出现的窗口中的文件,然后单击"确定"
5)现在点击"保存"按钮.
当点击保存按钮时,btnsave_Click函数应该触发,但它不会触发.如果我再次点击保存按钮,btnsave_Click会被触发.但这次上传控件不会选择文件.你可以在提供的文本框中看到它浏览控件也(仅用于显示我使浏览控件可见)
那么现在问为什么第一次没有触发btnsave_Click？
问题是IE不会让你通过javascript提交文件,用户必须单击文件输入.这是一个已知问题,如下所述:
When an file-input is opened via a scripted, forced click() event, IE won't let you submit the form.
If you click the file-input via your own mouse (what we don't want), IE will let you submit the form.在IE中打开文件输入对话框并上传onchange？
还有这里: 使用Javascript文件上传返回'拒绝访问'错误与程式化为一个按钮
因此,您必须欺骗用户,使文件输入透明,并将您的按钮放在文件输入下.当用户单击您的按钮时,他们将单击文件输入.
使用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;
}
| 归档时间： |
|
| 查看次数： |
11106 次 |
| 最近记录： |