ajaxとasp.netで画像をアップロードすると、HTMLが返されます

Question

簡単な画像をサーバーにアップロードしようとしています。 ページはwebformsの基本asp.netページです。

HTMLコード - dog.aspxで私のコードは

[WebMethod(EnableSession = true)] 
    public static string uploadDoc(HttpPostedFileBase file) 
    { 
     try 
     { 
     string _file = mkStorage.UploadImg(file); 
     return _file; 
     } 
     catch (Exception e) 
     { 
      return e.Message; 
     } 
    } 

そして、私はjQueryのAJAX呼び出しを持っている問題であり、バックエンドで

<div> 
<input type="file" id="myPhoto" /> 
<input type="button" id="upload" value="Upload" /> 
</div> 

正常に動作します。それはhtmlとしてコンソールにフルページだけを返します。私のブレーキポイントが作動しないので、Webメソッドを呼び出すことさえありません。

Javascriptコード

$(document).ready(function() { 
     $("#upload").click(function() { 
      var formdata = new FormData(); 
      var _image = $('#myPhoto')[0].files[0]; 
      formdata.append('file', _image); 

      $.ajax({ 
       type: "POST", 
       url: "dog.aspx/uploadDoc", 
       data: formdata, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (result) { console.log(result);}, 
       error: function (result) { console.log(result); } 
      }); 
     }); 
    }); 

私は他のAJAX呼び出しを持っているし、彼らが正常に動作します。しかし、それらはjsonをWebMethodに渡すだけです。だから私は、私のajax呼び出しパラメータに何か問題があると仮定します。

Answer 1

多分このような何か？

HTML：

//* 
<input type="file" class="upload" id="f_UploadImage"><br /> 
<img id="myUploadedImg" alt="Photo" style="width:180px;" /> 
//* 

は、今では一般的な機能のsendfileを（作成）私たちは注意いるFormDataのコレクションに、ファイルの内容を追加して、

function sendFile(file) { 

    var formData = new FormData(); 
    formData.append('file', $('#f_UploadImage')[0].files[0]); 
    $.ajax({ 
     type: 'post', 
     url: 'fileUploader.ashx', 
     data: formData, 
     success: function (status) { 
      if (status != 'error') { 
       var my_path = "MediaUploader/" + status; 
       $("#myUploadedImg").attr("src", my_path); 
      } 
     }, 
     processData: false, 
     contentType: false, 
     error: function() { 
      alert("Whoops something went wrong!"); 
     } 
    }); 
} 

jQueryのAjax呼び出しを行っている： contentTypeとprocessDataはfalseに設定されています。これは重要です。

ここでは、ファイルアップロード制御変更イベントでこの関数を呼び出します。 .i.e。ユーザーがアップロードする画像ファイルを選択するたびに、sendFile（）関数が呼び出しを取得します。コードは以下の通りです。

var _URL = window.URL || window.webkitURL; 
$("#f_UploadImage").on('change', function() { 

    var file, img; 
    if ((file = this.files[0])) { 
     img = new Image(); 
     img.onload = function() { 
      sendFile(file); 
     }; 
     img.onerror = function() { 
      alert("Not a valid file:" + file.type); 
     }; 
     img.src = _URL.createObjectURL(file); 
    } 
}); 

あなたは、私たちは、これが一般的なハンドラ（ASHXファイル）であるfileUploader.ashxとしてURLを設定するjQueryのAjaxの方法上記に通知を持っていることがあります。このファイルを使用することにより、サーバー側でファイルをアップロードします。クライアント側のコードで終わりました。サーバー側のコードに目を向けるつもりです。

サーバー側：サーバ側のコード（サーバー上の画像ファイルを保存するためのC＃コード）を処理する汎用ハンドラ（ashxファイル）を追加します。

まず、以下のコードに示すようにSystem.IO名前空間をインポートします。

C＃

コピーし、以下の記述したコードは、これはクライアント側からファイルを取得し、MediaUploaderのフォルダに保存し、その後、一意の名前で画像の名前を変更します。

using System; 
using System.Web; 
using System.IO; 
public class fileUploader : IHttpHandler { 

    public void ProcessRequest(HttpContext context) 
    { 
     context.Response.ContentType = "text/plain"; 
     try 
     { 
      string dirFullPath = HttpContext.Current.Server.MapPath("~/MediaUploader/"); 
      string[] files; 
      int numFiles; 
      files = System.IO.Directory.GetFiles(dirFullPath); 
      numFiles = files.Length; 
      numFiles = numFiles + 1; 
      string str_image = ""; 

      foreach (string s in context.Request.Files) 
      { 
       HttpPostedFile file = context.Request.Files[s]; 
       string fileName = file.FileName; 
       string fileExtension = file.ContentType; 

       if (!string.IsNullOrEmpty(fileName)) 
       { 
        fileExtension = Path.GetExtension(fileName); 
        str_image = "MyPHOTO_" + numFiles.ToString() + fileExtension; 
        string pathToSave_100 = HttpContext.Current.Server.MapPath("~/MediaUploader/") + str_image; 
        file.SaveAs(pathToSave_100); 
       } 
      } 
      // database record update logic here () 

      context.Response.Write(str_image); 
     } 
     catch (Exception ac) 
     { 

     } 
    } 

    public bool IsReusable { 
     get { 
      return false; 
     } 
    } 

} 

注：ここでは MediaUploaderはすべて私たちのアップロードされた画像が保存されます私たちのフォルダ名、です。

出力：私はゴナはブロブにそれらを保存していファイルシステムに画像を保存していないhere