我在更新面板中有一个Ajax异步文件上传控件。我的上传效果很好,但是上传完成后,我需要查看上传的图片。但这不起作用是我所做的
function UploadComplete(sender, args) { var filename = args.get_fileName(); var contentType = args.get_contentType(); if (contentType.indexOf('image') == -1) { document.getElementById('<%=lblStatus.ClientID%>').innerText = "Uploaded file must be an Image!"+ "<span style='color:red;'>" + args.get_errorMessage() + "</span>"; document.getElementById('<%=AsyncFileUpload1.ClientID%>').text.style.backgroundColor = "Red"; } else { var text = "" + filename + " | " + args.get_length() + " bytes"+"Uploaded Succesfully"; document.getElementById('<%=lblStatus.ClientID%>').innerText = text; $get("imageView1").src = "./~/" + filename; } }
AspCode:
<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime" UploaderStyle="Modern" ErrorBackColor="Red" ClientIDMode="AutoID" ThrobberID="Throbber" UploadingBackColor="#66CCFF" onuploadedcomplete="AsyncFileUpload1_UploadedComplete" /> <asp:Label ID="Throbber" runat="server" Style="display: none"> <asp:Image runat="server" ID="imgPreview" ImageUrl="~/Images/uploading.gif" /> </asp:Label> <img runat="server" id="imageView1"/> <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>
您可以使用OnUploadedComplete事件显示图像。
OnUploadedComplete
<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnUploadedComplete="ProcessUpload" protected void ProcessUpload(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) { string fileName = Server.MapPath("./") + "image.jpg"; AsyncFileUpload1.SaveAs(fileName); ScriptManager.RegisterClientScriptBlock(AsyncFileUpload1, AsyncFileUpload1.GetType(), "img", "top.document.getElementById('imgUpload').src='image.jpg';", true); }
有关如何显示预览的详细信息,请看以下示例:具有AsyncFileUpload控件的ASP.NET中的AJAX文件上传