ASP.NETのサーバーへファイルをアップロードするサンプルです。。
submitでファイルをASP.NETのサーバー転送しています。またそのときにsubmitによるページ遷移をさせないようにしています。
jQuery.uploadを利用していません。jQuery.uploadでは「http://localhost/」を付加したURLでは正常に動作しませんが、このサンプルでは動作します。
「http://localhost/」が使えるということは、ポートの異なるApache開発環境とAsp.net開発環境の間でデータをやりとりできることになります。
サンプル
submitでファイルをASP.NETのサーバー転送しています。またそのときにsubmitによるページ遷移をさせないようにしています。
jQuery.uploadを利用していません。jQuery.uploadでは「http://localhost/」を付加したURLでは正常に動作しませんが、このサンプルでは動作します。
「http://localhost/」が使えるということは、ポートの異なるApache開発環境とAsp.net開発環境の間でデータをやりとりできることになります。
サンプル
ホスト名 | : | |
ASP.NETファイルアップロードaspx | : |
JavaScript
//submitボタンが押されたときのイベント。 $(function(){ $("#form1").submit(function(){ //ファイルアップローURLを組み立て。 var host=$("#host_id").val(); var aspx=$("#aspx_id").val(); var url=host+aspx; //ファイルアップロードエレメントを取得。 var form = $(this); var fd = new FormData(form[0]); //☆非同期通信によるファイルアップロード。 $.ajax(url, { type: 'post', processData: false, contentType: false, data: fd, dataType: 'html', success: function(data){ //ファイルアップロード成功時の処理。 var imgUrl=host+"uploads/"+data;//ファイル名を作成。 $("#img1").attr("src",imgUrl);//imgタグのsrc属性にファイル名をセット。 console.log(data);//ログ出力。 } }); return false;//submitで画面遷移させない。 }); });
html
<table style="width:100%"><tbody style="background-color:#ff816f"> <tr><td style="width:20%">ホスト名</td><td>:</td><td style="widht:70%"><input type="text" id="host_id" value="http://localhost:2368/" /></td></tr> <tr><td>ASP.NETファイルアップロードaspx</td><td>:</td><td><input type="text" id="aspx_id" value="FileUploader.aspx" /></td></tr> </tbody></table> <form id="form1" method="post" action="" enctype="multipart/form-data"> <div><input id="upload_file" type="file" name="upload_file"></div> <input id="submit1" type="submit" value="アップロード"> </form> <img id="img1" src="" />
FileUploader.aspx
protected void Page_Load(object sender, EventArgs e) { Response.AppendHeader("Access-Control-Allow-Origin", "*");//クロスドメイン通信を許可する。 HttpPostedFile f = Request.Files["upload_file"];//アップロードファイルオブジェクトを取得。 string path = Server.MapPath("/")+"uploads/";//パスを取得。 if (f != null) { Debug.WriteLine(f.FileName);//デバッグ string fileUrl = path + f.FileName;//パス付ファイル名を組み立て。 f.SaveAs(fileUrl);//保存する。 Response.Write(f.FileName);//ajaxのレスポンス用のファイル名を書き出す。ここで書き出した文字はajaxのコールバック関数の引数になる。 } }