在提交按鈕單擊時重置文件上載
[英]File upload is reset on submit button click
問題描述
我在我的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）單擊附加文件按鈕（不在瀏覽中，它旨在使其顯示為false，此處僅為示例目的而顯示）
4）瀏覽出現的窗口中的文件，然后單擊“確定”
5）現在點擊“保存”按鈕。
當點擊保存按鈕時，btnsave_Click函數應該觸發，但它不會觸發。如果我再次點擊保存按鈕，btnsave_Click會被觸發。但這次上傳控件不會選擇文件。你可以在提供的文本框中看到它瀏覽控件也（僅用於顯示我使瀏覽控件可見）
那么現在問為什么第一次沒有觸發btnsave_Click？
4 個解決方案
解決方案1
6 已采納 2013-09-12 04:45:38
問題是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;
}
解決方案2
1 2013-09-12 04:34:24
你確定點擊工作正常嗎？ 因為我認為你沒有正確編寫java腳本代碼。
您需要在java腳本中獲取文件上載的ClientID
像這樣：
document.getElementById('<%= FileUploaddd2.ClientID %>').click();
更新后，我能夠成功運行代碼...
我認為您需要在服務器端代碼中的if塊內的try catch塊之后添加此行...
Try
sb.AppendFormat(" Uploading file: {0}", FileUpload1.FileName)
'saving the file
FileUpload1.SaveAs("c:\SaveDirectory\" + FileUpload1.FileName)
'Showing the file information
sb.AppendFormat("<br/> Save As: {0}", FileUpload1.PostedFile.FileName)
sb.AppendFormat("<br/> File type: {0}", FileUpload1.PostedFile.ContentType)
sb.AppendFormat("<br/> File length: {0}", FileUpload1.PostedFile.ContentLength)
sb.AppendFormat("<br/> File name: {0}", FileUpload1.PostedFile.FileName)
Catch ex As Exception
sb.Append("<br/> Error <br/>")
sb.AppendFormat("Unable to save file <br/> {0}", ex.Message)
End Try
lblmessage.Text = sb.ToString()
更新后
看到有關Internet Explorer的更新后。 我認為你的問題是這樣的：
使用javascript模擬輸入type =“file”的點擊
這也可能有所幫助： 瀏覽器在執行事件之前進行檢查
您還可以使用Ajax Control Toolkit的AjaxFileUpload來實現更好的顯示，並且已經實現了拖放等功能： 看一看 。 這樣您就不必模擬按鈕上的單擊。
解決方案3
1 2013-09-12 04:45:48
asp.net中的文件上傳非常簡單，但需要進行一些調整。 這是一個例子：
<form id="Form1" method="post" runat="server" enctype="multipart/form-data">
<input id="filMyFile" type="file" runat="server"><br/>
<asp:Button ID="btnSubmit" runat="server" BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px"
Text="Submit" />
</form>
試試這個它應該工作。
上傳文件后，你就制作了filMyFile.Visible=false; 並添加標簽以顯示上傳的文件和鏈接按鈕以將其刪除。
我希望現在有意義。
這是一個非常直接的參考： http ： //www.codeproject.com/Articles/1757/File-Upload-with-ASP-NET
解決方案4
1 2013-09-23 01:37:42
我不知道我是否誤解了這個問題，但你為什么不這樣做：
triggerFileUpload() {
document.forms[0].submit();
}
拖放文件並在提交按鈕上上傳，然后在PHP中單擊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.