从JavaScript或后台代码设置AjaxFileUpload控件的值

Question

I am using AjaxFileUpload Control, and it works perfectly fine.

I have separate Button, onClick of which I need to add a File to the AjaxFileUpload Control, so that the FileUploadControl has the Value of the File which is Selected on ButtonClick.

I am trying to do this as I want events attached to AjaxFileUpload Control to work with this button as well.

Here is the code attached

               <cc1:AjaxFileUpload ID="AjaxFileUpload3" runat="server" AllowedFileTypes="zip" Enabled="true"
                        MaximumNumberOfFiles="1" OnUploadComplete="File_Upload"  OnClientUploadComplete="UploadCompleteArchive" 
                        Width="240px" /> 
                    <asp:UpdatePanel runat="server">
                        <ContentTemplate>
                            <asp:HiddenField ID="hfBoxZip_URL" runat="server" />
                            <asp:HiddenField ID="hfBoxZip_Name" runat="server" />
                            <asp:Button ID="btnZip" runat="server" Text="Button" OnClick="btnZip_Click" style="display:none;"/>
                        </ContentTemplate>
                    </asp:UpdatePanel>

I need help with this using JavaScript or CodeBehind (C#).

Any help is appreciated.

Answer 1

Ok, after some more hunting around and trying out a few things, I've got a solution of sorts.

Upside of this solution:

It allows user to upload a file and you can save it as any filename you want and still display it on screen
It works 

Downside of this solution:

This only seems to work with AsyncFileUpload...the same code does not work for AjaxFileUpload, unfortunately.
It requires forcing a postback so you get the "screen flashing" effect. Not elegant, but it works. 

The solution is straight-forward...In the javascript, rather than finding the filename and setting the image.src to that filename, simply force a postback of the updatepanel. This assumes you have set the ImageURL in the code-behind.

Thus, the complete code is:

In the Head section of the asp page:

<script type="text/javascript">
    function uploadComplete(sender, args) {
        __doPostBack('upTop', '');
    }
</script>

"upTop" is the ID of my UpdatePanel

The Body asp code is standard:

  <asp:UpdatePanel ID="upTop" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Panel ID="Panel1" CssClass="panelbox" runat="server">
            <table>
                <tr>
                    <td>
                        <asp:Image ID="imgClient" runat="server" />
                    </td>
                    <td>
                        <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" OnClientUploadComplete="uploadComplete" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" ThrobberID="MyThrobber" runat="server" />
                        <asp:Image ID="MyThrobber" ImageUrl="~/Images/pleasewait.gif" Style="display: None" runat="server" />
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

And finally the code-behind:

        Protected Sub AsyncFileUpload1_UploadedComplete(sender As Object, e As AjaxControlToolkit.AsyncFileUploadEventArgs)
        Dim Filepath As String
        Dim NewFileName As String

        Filepath = "/ClientPhotos"
        NewFileName = MapPath(Filepath) & "\" & CurrentCustomer.ID.ToString & ".jpg"
        Try
            AsyncFileUpload1.SaveAs(NewFileName)
        Catch ex As Exception
            ShowError("Error uploading photo: " & ex.Message)
            Exit Sub
        End Try

        Me.imgClient.ImageUrl = "~/ClientPhotos/" & CurrentCustomer.ID.ToString & ".jpg"
        Me.imgClient.Width = 200
        Me.imgClient.Height = 200

    End Sub

Read More - http://forums.asp.net/t/1894718.aspx?AjaxFileUpload+Upload+and+display+image+