asyncfileuploadアップロード後にページを更新せずにイメージを表示

Question

私はこれでしばらくの間、運が無くなってしまった。

asyncfileuploadコントロールを使用してファイルをアップロードし、画像を表示します。アップロードが正常に行われ、ページを再読み込み/更新するとイメージが表示されます。

しかし、ページを再読み込み/更新することなくこれを行う方法を知る必要があります。

オンラインの記事を読んだ後、私はのScriptManagerを使用するための推奨事項を参照してくださいが、これは私のために動作しません：

protected void FileUploadComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 
    { 

      . 
      . 
      . 
      . 

     ScriptManager.RegisterStartupScript(this, GetType(), "TestAlert", 
     "window.parent.document.getElementById('" + img_ProfilePic.ClientID + "').src='" + "http://www.site.com/default.jpg" + "');", 
     true); 

}

は、あなたがしたいことがあり、 Behrouz

Answer 1

でAsyncFileUploadを使用するための正しい方向を指している必要があり、それはデバッグの権利、少数の日だ、私はこれを見つけましたバグです：

http://ajaxcontroltoolkit.codeplex.com/workitem/26761

私は、これは他の人にいくつかの時間を節約することを願っています。

Answer 2

をありがとうあなたのScriptManagerのJSをチェックしてください。 JavaScript文字列の末尾に余分な "）"があると、エラーが発生する可能性があります。

それでも問題が解決しない場合は、次のリンクは、数日後のUpdatePanel
http://forums.asp.net/t/1479689.aspx?PageIndex=2

Answer 3

user554134で言及されたバグを発見するまでに時間を無駄にしてから、asyncfileuploadコントロールと一緒にjQueryを使用する次のソリューションを思いつきました。

• まずバグ固定、user554134のリンクあたり を持って AjaxToolkitのコンパイル済みのバージョンを取得します。

• jQueryを追加して画像を隠す/表示します。

$(document).ready(function() { 
      $("#imgConfirmation").hide(); 
     }); 

覚えておくべき重要な点は、AsyncFileUploadコントロールはインラインフレームを利用していることであるので、あなたの「ショー」関数を呼び出すときにjqueryのアクセスにフレームの親を持っている必要があります。例えば：あなたのUploadedCompleteイベントで

 function showImage(imagePath) { 
      $('#imgConfirmation', window.parent.document).attr("src", imagePath); 
      $('#imgConfirmation', window.parent.document).show(); 
     } 

• 、JS関数にフックする クライアントスクリプトを登録し、ファイルを保存した後。たとえば、

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "showImage", "showImage('" + myLink + "');", true); 

Answer 4

チェックこのリンクは、私は思うので、それはあなたに完全な

http://www.aspsnippets.com/Articles/Display-image-after-upload-without-page-refresh-or-postback-using-ASP.Net-AsyncFileUpload-Control.aspx

Answer 5

コードが使用される使用である：

アップロードと表示コード

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 

{ 

string strPath = MapPath("~/upload/") + Path.GetFileName(e.FileName); 

AsyncFileUpload1.SaveAs(strPath); 

displayImage.ImageUrl = strPath; 

} 

クライアント側のJavaScriptを次のように追加する必要があります。

<script type="text/javascript"> 
 

 
function uploadComplete(sender, args) { 
 

 
var imageName = args.get_fileName(); 
 

 
$get("displayImage").src = "./upload/" + imageName; 
 

 
} 
 

 
</script>

使用AsyncFileUploadにコントロール：

詳細：https://code.msdn.microsoft.com/How-to-upload-an-image-and-c3703a2c