如何使用 Ajax 發送文件？

Question

我的表單設置了 method=post 和 enctype="multipart/form-data" 並定期提交表單信息和照片已更新，但是當我想使用 Ajax 時，所有內容都已插入，但不是我的照片！！ 解決辦法是什么 ？

$("#course-frm").submit(function(event){
event.preventDefault();
var formID = 'course-frm';
var form = $("#"+formID+'-container'+" form");
const formData = new FormData(this);
$.ajax({
    url: event.target.action,
    type: event.target.method,
    data: formData,
    cache: false,
    contentType: false,
    enctype: 'multipart/form-data',
    processData: false,
    success: function (data) {
        if(data == 'success'){
            sweetAlertShow('عملیات ثبت با موفقیت انجام شد', 'The operation was Successful', 'success');
            form.trigger('reset');
            $("#course-frm-container").load(" #course-frm-container");
        }else if(data == 'unsuccess'){
            sweetAlertShow('امکان ثبت وجود ندارد', 'The operation was Unsuccessful', 'error');
        }
    },
    error: function(xhr){
        var data = xhr.responseJSON;
        if($.isEmptyObject(data.errors) == false) {
            $.each(data.errors, function (key, value) {
                $('#'+formID +'-'+ key)
                    .closest('.form-group')
                    .addClass('has-error')
                    .append('<span class="help-block">' + value + '</span>');
            });
        }
    }
});

});

Answer 1

您需要創建一個表單數據對象。 在 ajax 函數中，將processData設置為 `false。

因為作為對象傳遞給 data 選項的數據（從技術上講，除了字符串之外的任何內容）將被處理並轉換為查詢字符串，適合默認的內容類型“application/x-www-form-urlencoded”。 如果要發送 DOMDocument 或其他未處理的數據，請將此選項設置為 false。

JS

  $("form").submit(function(evt){    
      evt.preventDefault(); //prevent refresh
      const formData = new FormData(this); // you need to create a FormData obj to be able to send files
   $.ajax({
       url: 'upload-my-files', //change this to your url
       type: 'POST',
       data: formData, //put formData as body data
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (data) {
         console.log(data);
       }
   });
 });

參考：

https://developer.mozilla.org/en-US/docs/Web/API/FormData

http://api.jquery.com/jquery.ajax/