Как сохранить файл с помощью ajax - PullRequest
Новая
       5

Как сохранить файл с помощью ajax

0 голосов
/ 10 февраля 2019

Я пытаюсь сохранить файл, отправив FormData по ajax на контроллер, проблема в том, что мой ajax не работает, даже когда я использую функцию FormData, чтобы получить все переменные в одной форме.

IЯ пытался использовать форму, но в таблице я не мог использовать теги формы, потому что моя кнопка находится в другом тд.Когда я использую его для всей таблицы, он тоже не работает, я создал FormData, где я добавил все свои переменные, остальные работают, но изображение не работает.

index.cshtml: 

<tr class="form" style="display:none">

    <td class="name">
        <input type="text" name="Jméno" value="" />
    </td>
    <td class="price">
        <input type="number" name="Cena" value="" />
    </td>
    <td class="quantity">
        <input type="number" name="Mnozstvi" value="" />
    </td>
    <td class="image">
        <input type="file" id="fileOne" name="fileOne" runat="server" />
    </td>
    <td>
        <button class="FirstSave" type="button" id="btnUpload">Uložit</button>

        <button class="getBack">Zahodit</button>

    </td>
</tr>

Вот мой JavaScript 

$(".FirstSave").click(function () {

      let file = document.getElementById('fileOne').file;
      let form = new FormData;

      form.append('Image', file);
      form.append('Name', name);
      form.append('Price', price);
      form.append('Quantity', quantity);
      $.ajax({
         url: "Insert",
         method: "POST",
         cache: false,
         processData: false,
         data: form,
    });
})

Получение и установка продуктов 

public class Product
{
    public string Name { get; set; }
    public int Price { get; set; }
    public int Quantity { get; set; }
    public string ImageUrl { get; set; }
    public HttpPostedFileBase Image { get; set; }

}

Контроллер продуктов 

[HttpPost]
public ActionResult Insert(Product product)
{
    HttpPostedFileBase file = product.Image;
    if (file != null)
    {
        var fileName = Path.GetFileName(file.FileName);
        product.ImageUrl = Path.Combine(Server.MapPath("~/Content/Images/Products/"), fileName);
        file.SaveAs(product.ImageUrl);
    }
    return null;
}

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

используйте вместо этого: 

var fileName = file.FileName;

замените вашу линию 

var fileName = Path.GetFileName(file.FileName);

, поэтому, если бы я изменил ваш код: 

    var fileName = file.FileName;
    product.ImageUrl = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
    file.SaveAs(product.ImageUrl);

, если этого недостаточнозатем проверьте этот код js, который я использую для одной из моих загрузок: 

for (var x = 0; x < files.length; x++) {
    data.append("file" + x, files[x]);
}
0 голосов
/ 10 февраля 2019

Это код, который работает для меня: 

$(document).on("submit", "#myFormId", function (event) {
      event.preventDefault();
      event.stopImmediatePropagation();

      var formData = new FormData(this);

      $.ajax({
           url: 'my url',
           type: 'POST',
           data: formData,
           success: function (response) {
               if (response) {
                   // Do whatever you want to do with response 
               }
           },
           error: function (error) {
               console.log(error)
           },
           cache: false,
           contentType: false,
           processData: false
      });
      return false;
 });

Я вижу, вам не хватает contentType: false в ваших настройках AJAX.Это необходимо для загрузки файла с помощью ajax.

...