.netとjquery/ajaxを使用して画像をアップロードしているときにフォームデータを読む

Question

私が取り組んでいるプロジェクトのHttpHandlerを作成しました。ハンドラはHTMLフォームからイメージを受け取ります。データはJQUERY/AJAXを介して送信されます。私は同じ呼び出しからフォームデータの残りを受け取ることができるかどうか疑問に思っていました。この例では、ファイルセレクタとテキストボックスの2つの入力があります。私はテキストボックスの中の何も読んでみたい。フォームに送信するときにテキストボックスデータを取得することは可能ですか、それとも個別に行う必要がありますか？

のjavascript：

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!"); 
     } 
    }); 
} 

ASPハンドラコード：

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; 
     } 
    } 

} 

HTML：

<input type="text" id=f_input> 
<input type="file" class="upload" id="f_UploadImage"> 

Answer 1

あなたが一度にすべてのフォームデータを取得し、あなたのFORMDATA変数にそれを置くことができます。

var formData = new FormData($('form')[0]); 

それとも、データの各ビットを追加することができ、あなたがすでにやって始めているようにあなたが別途必要：あなたはすべてのフォームのデータは、あなたのハンドラコードに提出ばかりで終わる必要があります

var formData = new FormData(); 
formData.append('file', $('#f_UploadImage')[0].files[0]); 
formData.append('text', $('#f_input').val()); 

いずれかの方法。

場合によっては、画像とテキストのコンテンツを正しく取得するために、ajaxの設定を調整する必要があります。以下は、私が現在画像とともにフォームデータを送信するために現在使用しているものと、フォームの外にあるトークンです。

var formData = new FormData($('form')[0]); 
formData.append("__RequestVerificationToken", $('[name=__RequestVerificationToken]').val()); 

$.ajax({ 
    url: "/URL", 
    type: 'POST', 
    contentType: false, 
    processData: false, 
    data: formData, 
    dataType: 'json', 
    success: function(data) { 
     //do stuff 
    } 
});