Question

我在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？

Answer 1

问题是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. 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;
        }

Answer 2

您确定点击有效吗？因为我认为你没有正确编写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的更新后。我认为你的问题是：

Simulating the click on input type="file" using javascript

这也可能有所帮助：Browser check before executing an event

您还可以使用Ajax Control Toolkit的AjaxFileUpload来实现更好的显示，并且已经实现了拖放等功能：Have a look。这样您就不必模拟按钮上的单击。

Answer 3

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

Answer 4

我不知道我是否误解了这个问题，但你为什么不这样做：

triggerFileUpload() {
      document.forms[0].submit();
}

在提交按钮单击时重置文件上载

4 个答案: