如何使用 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/