Asyncfileupload file preview doesn't show
I am having an Ajax Asynchronous file upload control in update panel. My upload works fine but after the upload is completed., I need to see the image I have uploaded. But it doesnt work here is what I have done
function UploadComplete(sender, args) {
var filename = a开发者_高级运维rgs.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>
You can use the OnUploadedComplete
event to display the image.
<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);
}
For Details on how to show the preview take a look at this example: AJAX File Upload in ASP.NET with the AsyncFileUpload Control
I don't think "~" will work with HTML controls. Try converting the path to actual path and set the Image src.
精彩评论