如何通過AJAX發送屬性到文件？

我有一個MVC應用程序，我在應用程序中上傳圖片文件。如何通過AJAX發送屬性到文件？

此代碼：

  var files = $(".uploadFile").data("files"); 

      $.each(files, function (key, value) { 
       data.append('file', value); 
      }) 

      $('.userForm *').filter(':input').each(function (index, value) { 
       data.append(value.id, $("#" + value.id).val()); 
      }); 

      $.ajax({ 
       url: "/Customer/AddCustomer", 
       type: 'POST', 
       data: data, 
       cache: false, 
       processData: false, 
       contentType: false, 
       success: function (data) { 
       // logic 
       $.LoadingOverlay("hide"); 
       }, 
       error: function (event, jqxhr, settings, thrownError) { 
        // logic 
        $.LoadingOverlay("hide"); 
       } 
      });

Server代碼：

public string AddCustomer(HttpPostedFileBase file, Customer customer) 
    { 

     // add customer and return to edit view 
     return partialView("customerEdit"); 
    }

我試圖找出我怎麼能一個屬性添加到我送的每個文件？例如，我添加的每個文件我創建一個列表，我附加到DOM。在此列表中，每個文件旁邊都有一個複選框，用於指示此文件（圖片）是否應該是個人資料圖片。

如何將boelan屬性附加到每個文件？

來源

2015-10-18 ThunD3eR

你可以用'data.append（ '鍵'， '值'）'只是追加更多的數據到FormData對象，例如文件名作爲鍵，並且布爾值作爲值。 – adeneo

我會嘗試，但我擔心我將如何能夠收回它？我接受一個模型作爲具有特定屬性的第二參數。正如我所說，我會嘗試，但我有一些小疑惑 – ThunD3eR

你必須建立你的後端來接收你發送的數據，它將如何工作？ – adeneo

感謝@adeneo我的大腦得到了一個開始。

我不得不重新考慮我的策略，因爲我不想把多餘的參數作爲一個concatinated字符串。

我做了以下內容：

在我的第一篇我發送的文件和客戶數據。我將客戶保存在數據庫中，並將文件存儲在tempdata中，以便能夠在我的第二篇文章中訪問該文件，在那裏我將文件保存到數據庫，並附帶額外的參數。不包括

   $.ajax({ 
        url: "/Customer/AddCustomer", 
        type: 'POST', 
        data: data, 
        cache: false, 
        processData: false, 
        contentType: false, 
        success: function (data) { 

         // "Pictures" is an array that contains objects with all the file names and other properties. 
         $.ajax({ 
          url: "/Customer/AddCustomerPictures", 
          type: 'POST', 
          data: JSON.stringify({ pictureFiles: Pictures}), 
          contentType: 'application/json; charset=utf-8', 
          success: function(data) { 

           //logic 
          } 
         }); 

         //logic 
        }, 
        error: function (event, jqxhr, settings, thrownError) { 
        //logic 

        } 
       });

服務器代碼，注意整個soloution：

腳本

public ActionResult AddCustomer(CustomerM customer) 
    { 

     var Id = _iScissorFingersManager.AddCustomer(customer.FirstName, customer.LastName, customer.Email,customer.PhoenNumber); 

     if (Request.Files.Count != 0) 
     { 
      TempData["files"] = Request.Files; 
      TempData["Id"] = Id; 
     } 
     // add customer and return to edit view 

     return PartialView("CustomerEdit", customer); 

    } 

    public ActionResult AddCustomerPictures(List<PictureFiles> pictureFiles) 
    { 
     var files = (HttpFileCollectionBase)TempData["files"]; 
     var id = (long) TempData["Id"]; 

     if (files != null) 
     { 
      foreach (var p in pictureFiles) 
      { 
       for (int i = 0; i < files.Count; i++) 
       { 
        HttpPostedFileBase hpf = files[i]; 
        p.Name == files[i].FileName && p.IsProfile ? _iScissorFingersManager.UploadCustomerPictures(hpf.InputStream, hpf.ContentType, id, true), _iScissorFingersManager.UploadCustomerPictures(hpf.InputStream, hpf.ContentType, id); 

       } 
      } 

     } 

     return PartialView("CustomerProfileImage"); 
    }

來源

2015-10-19 15:30:21 ThunD3eR

如何通過AJAX發送屬性到文件？

回答

相關問題