1

jQuery ライブラリUploadifyを使用する ASP.NET ページを考えてみましょう。

ASP.NET Web フォーム ページの一連のイベントを次に示します。

  1. ユーザーがファイル アップロード コントロールをクリックします。プレーンな古い HTML<input type="file" />
  2. ユーザーは、[参照] ダイアログを使用してシステムからイメージ ファイルを選択します。すべて正常に動作しています。
  3. jQuery イベントが発生します。期待どおりに適切にアップロードする ashx を呼び出します。
  4. ファイルがアップロードされたので、呼び出し元の .aspx ページで変更するにはどうすればよい<asp:image>ですか? ポストバックなしでこれを本当にやりたいです!

これがコードです！

<asp:Image ID="imgChangeMe" runat="server" /><br />
<input type="file" name="uploadify" id="uploadify" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#uploadify").uploadify({
        'uploader'       : 'scripts/uploadify/uploadify.swf',
    'script'         : 'uploadify.ashx',
    'folder'         : 'uploads',
    'queueID'        : 'fileQueue',
    'auto'           : true,
    'multi'          : true
        });
       });
 </script>

質問：

<asp:image>ユーザーがアップロードしたばかりの画像を反映するには、どのように を変更しますか?

この質問は、実際にはライブラリのアップロードに関連するものではなく、.ashx の実行の戻り/終了にどのように対応するべきですか? これを別のjQueryメソッドで行うべきか

4

1 に答える 1

2

ポストバックを作成せずにこれを行うことができます。必要なのは、アップロードされた画像のパスを取得することだけです。ドキュメントから、プロパティからパスを取得するか、サーバーからパスを返すことUploadifyができると思います：fileObjresponse property

fileObj : 選択されたファイルに関する詳細を含むオブジェクト。

  • name – ファイルの名前
  • filePath – アップロードされたファイルへのサーバー上のパス
  • size – ファイルのバイト単位のサイズ
  • creationDate – ファイルが作成された日付
  • modifiedDate – ファイルが最後に変更された日付
  • type – 「.」で始まるファイル拡張子</li>

response : サーバーから送り返されたデータ。

aspx イメージが次のような場合:

<aspx:image id="myImage"...../>

次のように設定できます。

 //Uploadify hookup

 'onComplete': function(evt, qid, fObj, res){
     var f = fObj.filePath + fObj.name; //PUT SLASH IF REQUIRED BETWEEN
     $("img[id$='myImage']").attr("src",f);

     //for future readers who might be using master pages.
     $('#<%=myImage.ClientID %>').attr("src", f);
     $('#<%=txtMyImgPath.ClientID %>').val(f);
 }
于 2009-10-06T04:41:45.313 に答える