2011-05-12 78 views
0

我在更新面板中有一个Ajax异步文件上传控件。我的上传工作正常,但上传完成后,我需要查看我上传的图片。 但它不这里工作是我做了什么Asyncfileupload文件预览不显示

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> 
+0

你能表现出一定的代码? – David 2011-05-12 13:47:46

+0

已编辑该问题请看看 – pinki 2011-05-12 14:06:43

回答

2

您可以使用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); 
} 

有关如何显示预览看看这个例子详细说明:AJAX File Upload in ASP.NET with the AsyncFileUpload Control

+0

嗨,但如果你看到我的代码我已经有一个事件OnUploadedComplete,这就是我在我的代码背后做的,但我仍然没有任何想法,为什么它不工作 – pinki 2011-05-13 09:16:19

1

我不认为 “〜” 将与HTML控件的工作。尝试将路径转换为实际路径并设置图像src。