AjaxControlToolkit AsyncFileUpload : 通过 JavaScript 上传后获取文件路径

Question

我使用 ASP.NET 和 VB.NET 构建了一个 Web 表单。

使用 AsyncFileUpload 上传图像后，上传的图像应显示在图像框中。 AsyncFileUpload 不会引发页面回发，因此我必须通过 JavaScript 在客户端处理此问题。

问题：如何通过 JavaScript 从 AsyncFileUpload 获取上传文件路径？

<asp:Image ID="imgCategory" runat="server" Height="225px" Width="300px" />
<ajaxToolkit:AsyncFileUpload ID="ajxAsyncFileUpload" runat="server" OnClientUploadComplete="UploadComplete"/>


<script type="text/javascript">
    function UploadComplete() {
        var uploadpath = document.getElementById('<%=ajxAsyncFileUpload.ClientID%>').???????;

        document.getElementById('<%=imgCategory.ClientID%>').setAttribute('src', uploadpath);
    }
</script>

Answer 1

使用任何文件上传都不会将客户端路径名传递到服务器。

至于文件上传完成后不回发吗？

嗯，有一个客户端“所有文件已完成上传”事件，因此您可以使用它来触发回发，更好的是让该例程“单击”按钮，这样服务器端您就有了一个很好的所有文件上传完毕后的代码存根。

所以，说出这个简单的标记：

<asp:RadioButtonList ID="MyTabs" runat="server" CssClass="rMyChoice"
    RepeatDirection="Horizontal" AutoPostBack="true"
    OnSelectedIndexChanged="MyTabs_SelectedIndexChanged">
    <asp:ListItem Value="0" Selected="True">Upload Files</asp:ListItem>
    <asp:ListItem Value="1">View Uploaded Files</asp:ListItem>
</asp:RadioButtonList>


<div id="myfiles" runat="server">

    <h3>Files uploaded</h3>
    <asp:GridView ID="GVFiles" runat="server" AutoGenerateColumns="False"
        DataKeyNames="ID" CssClass="table table-hover" Width="35%">
        <Columns>
            <asp:BoundField DataField="UserName" HeaderText="User Name" />
            <asp:BoundField DataField="UpLoadDate" HeaderText="Uploaded" />
            <asp:BoundField DataField="FileName" HeaderText="File" />
            <asp:TemplateField HeaderText="Preview">
                <ItemTemplate>
                    <asp:Image ID="iPreview" runat="server"
                        Width="128px" Height="96px" />
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Download"
                ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <button id="cmdDownLoad" runat="server" class="btn"
                        onserverclick="cmdDownLoad_ServerClick"
                        style="margin-top: 32px">
                        <span aria-hidden="true" class="glyphicon  glyphicon-cloud-download"></span>
                    </button>

                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

<div id="myupload" runat="server" style="width: 40%">

    <h4>Select Files to upload</h4>
    <br />
    <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
        OnUploadComplete="AjaxFileUpload1_UploadComplete"
        OnClientUploadCompleteAll="alldone" />
</div>

<asp:Button ID="cmdAllDone" runat="server" Text="Hidden all done upload Button"
    OnClick="cmdAllDone_Click" ClientIDMode="Static" Style="display: none" />


<script>

    function alldone() {

        $('#cmdAllDone').click()
    }

</script>

因此，请注意我们如何有一个“隐藏”按钮，当所有文件上传完成后，我们单击该按钮。这为我们提供了存根后面的最终代码，以便在上传所有文件时运行。

所以，背后的代码是这样的：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        Session("UserName") = "Albert" ' testing
        LoadGrid()

        myfiles.Visible = False
        myupload.Visible = True

    End If
End Sub


Sub LoadGrid()

    GVFiles.DataSource = MyRst("SELECT * FROM MyFiles ORDER BY UpLoadDate")
    GVFiles.DataBind()

End Sub



Protected Sub AjaxFileUpload1_UploadComplete(sender As Object, e As AjaxControlToolkit.AjaxFileUploadEventArgs)

    ' save file to UpLoadFiles folder
    Dim strF As String = Server.MapPath($"~/UpLoadFiles/{e.FileName}")

    AjaxFileUpload1.SaveAs(strF)

    ' add this row to database.

    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand("INSERT INTO MyFiles 
                                       (UserName, FileName, SaveFilePath, UpLoadDate)
                                        VALUES (@User, @FileName, @FPath, @UpLoadDate)", conn)

            cmdSQL.Parameters.Add("@User", SqlDbType.NVarChar).Value = Session("UserName")
            cmdSQL.Parameters.Add("@FileName", SqlDbType.NVarChar).Value = e.FileName
            cmdSQL.Parameters.Add("@FPath", SqlDbType.NVarChar).Value = strF
            cmdSQL.Parameters.Add("@UpLoadDate", SqlDbType.DateTime).Value = DateTime.Now
            conn.Open()
            cmdSQL.ExecuteNonQuery()
        End Using
    End Using

End Sub

想要“良好的接触”和奖励积分？我们通过使用 GridView 的行数据绑定事件来显示文件类型或图像预览。

因此这段代码：

Protected Sub GVFiles_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GVFiles.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then

        Dim gRow As DataRowView = e.Row.DataItem
        Dim RowImage As Image = e.Row.FindControl("iPreview")
        Dim sFile As String = gRow("FileName")

        Select Case Path.GetExtension(sFile).ToUpper
            Case ".JPG", ".JPEG", ".JPE", ".BMP", ".GIF", ".PNG"
                RowImage.ImageUrl = $"~/UpLoadFiles/{sFile}"
            Case ".ZIP"
                RowImage.ImageUrl = $"~/Content/zips.png"
            Case ".PDF"
                RowImage.ImageUrl = $"~/Content/pdf5.png"
            Case Else
                RowImage.ImageUrl = $"~/Content/file2.png"
        End Select

    End If

End Sub

最终结果是这样的：

因此，在大多数情况下，您不会获得也不会在客户端传递路径名。但是，由于每个文件上传都会触发 UpLoadComplete 事件，因此我们将文件保存到某个文件夹，并在本示例中向数据库添加了一行。

当所有文件上传完毕后，我们从客户端 JavaScript 例程单击“隐藏”按钮？这就是这个简单的代码：

Protected Sub cmdAllDone_Click(sender As Object, e As EventArgs)

    myfiles.Visible = True
    myupload.Visible = False

    LoadGrid()
    MyTabs.SelectedIndex = 1

End Sub

Protected Sub MyTabs_SelectedIndexChanged(sender As Object, e As EventArgs)

    Select Case MyTabs.SelectedIndex
        Case 0
            myupload.Visible = True
            myfiles.Visible = False
        Case 1

            myupload.Visible = False
            myfiles.Visible = True

    End Select
End Sub

所以我经常使用RadioButtonList作为“类似选项卡”的控件，只隐藏或显示上传部分的2个div，或者查看上传的文件。