通过AJAX发送文件以及JSON信息

Question

我有一个ASP.NET c#页面，该页面将以JSON格式发布带有AJAX的表单信息。 此信息包括文本Texboxes和值Dropdownlists等

此外我也需要发送文件。

我曾尝试下面的代码，它工作正常：

   $(".popup-content input:text,.popup-content textarea").each(function() { // Fill object by inputs 
        objInputs[$(this).attr("name")] = $(this).val(); 
       }); 
       $.ajax({ //Post information 
        type: "POST", 
        url: "myAjax.aspx", 
        data: { func: "Create", information: JSON.stringify(objInputs) /* Convert object to JSON string */ }, 
        success: function (data) { // if sending was successful try to send file 
           var files = $("#fileImage").get(0).files; //get files form uploadfile 
           if (files.length > 0) { 
            var data = new FormData(); 
            data.append(files[0].filename, files[0]); 
            $.ajax({ //Send file 
             type: "POST", 
             url: "Handler1.ashx", 
             contentType: false, 
             processData: false, 
             data: data, 
             success: function (data) { 

             }, 
             error: function (xhr, ajaxOptions, thrownError) { 
              alert(xhr.status + " " + thrownError); 
             }, 
            }); 
          } 
        }, 
        error: function (xhr, ajaxOptions, thrownError) { 
         alert(xhr.status + " " + thrownError); 
        }, 
       }); 

但现在我想知道是否有办法把我的文件，我的JSON一起？

Answer 1

我找到了解决方案。 jQuery代码应改为类似如下：

<script> 
     $(document).ready(function() { 
      $(document).on("click", "#submit", function() { 
       var objInputs = {}; 
       objInputs["id"] = "12"; 
       $("#form1 input:text").each(function() { // Fill object by inputs 
        objInputs[$(this).attr("name")] = $(this).val(); 
       }); 
       var formData = new FormData(); 
       formData.append("information", JSON.stringify(objInputs)); 
       var files = $("#fileupload").get(0).files; //get files form uploadfile 
       if (files.length > 0) { 
        for (var i = 0; i < files.length; i++) { 
         //add each file to the form data and iteratively name them 
         formData.append("file-" + i, files[i]); 
        } 
        $.ajax({ //Send file 
         type: "POST", 
         url: "Handler1.ashx", 
         contentType: false, 
         processData: false, 
         data: formData, 
         success: function (data) { 
          alert(data) 
         }, 
         error: function (xhr, ajaxOptions, thrownError) { 
          alert(xhr.status + " " + thrownError); 
         }, 
        }); 
       } 
      }); 
     }); 
    </script> 

和C＃代码来处理数据，发送（Handler1.ashx）：

public void ProcessRequest(HttpContext context) 
    { 
     if (context.Request.Files.Count > 0) //To handling files 
     { 
      HttpFileCollection files = context.Request.Files; 
      for (int i = 0; i < files.Count; i++) 
      { 
       if ((files[i].ContentLength < 500000) && (files[i].ContentType == "image/jpeg")) 
       { 
        HttpPostedFile file = files[i]; 
        string fname = context.Server.MapPath("~/Images/" + file.FileName); 
        file.SaveAs(fname); 
       } 
      } 
      context.Response.ContentType = "text/plain"; 
      context.Response.Write("File Uploaded Successfully!"); 
     } 
     if (!string.IsNullOrEmpty(context.Request["information"])) //To handeling JSON 
     { 
      string JSON = context.Request["information"]; //JSON String 
     } 
    }