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のコールバック関数の引数になる。
}
}