9

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

在此处下载示例代码

更新

重现我面临的错误

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

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

3）单击附加文件按钮（不在浏览时，它旨在使可见为假，此处仅用于示例目的）

4）浏览出现的窗口中的文件，然后单击确定

5）现在点击保存按钮。

当点击保存按钮时，btnsave_Click 函数应该触发，但它没有触发。如果我​​再次点击保存按钮 btnsave_Click 被触发。但是这次上传控件不会选择文件。你可以在提供的文本框中看到它浏览控件也（仅用于显示这一点，我将浏览控件设为可见）

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

4

4 回答 4

6

问题是 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;
        }
于 2013-09-12T04:45:38.183 回答
1

你确定点击有效吗？因为我认为您没有正确编写 java 脚本代码。

您需要ClientID在 java 脚本中获取文件上传

像这样：

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 模拟点击 input type="file"

这也可能有帮助：在执行事件之前进行浏览器检查

您还可以使用 Ajax Control Toolkit 的 AjaxFileUpload 以获得更好的显示效果，并且已经在其中实现了拖放等功能：看一看。这样您就不必模拟单击按钮。

于 2013-09-12T04:34:24.853 回答
1

在 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"
                            文本="提交" />
</form>

试试这个，它应该可以工作。

上传文件后，您已制作filMyFile.Visible=false;并添加标签以显示上传的文件和链接按钮以将其删除。

我希望现在说得通。

这是一个非常直接的参考： http: //www.codeproject.com/Articles/1757/File-Upload-with-ASP-NET

于 2013-09-12T04:45:48.473 回答
1

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

triggerFileUpload() {
      document.forms[0].submit();
}
于 2013-09-23T01:37:42.077 回答