'append' được gọi trên một đối tượng không triển khai FormData giao diện

Tôi đang cố gắng tải hình ảnh lên bằng jquery và ajax. Nhưng điều kỳ lạ đã xảy ra ở đây. Trong bảng điều khiển Ghi nhật ký hiển thị

TypeError: 'append' được gọi trên một đối tượng không triển khai FormData giao diện.

Xin vui lòng cho tôi biết tôi đã làm gì sai ở đây?

Tập lệnh JS

var prosrc=$("#pro_pix img").last().attr("src");
$("#logoform").on('change',function(event){
var postData = new FormData(this);
$("#pro_pix img").last().hide();
$("#pro_pix img").first().show();
event.preventDefault();
$.ajax(
    {
        url : "/function/pro_pic_upload.php",
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR)
        {
        $("#pro_pix img").last().show();
        $("#pro_pix img").first().hide();
        $("#pro_pix h6").text(data);
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //if fails     
        }
    });
});

Đánh dấu HTML của tôi

 <div class="row">
    <!-- left column -->
    <div id="pro_pix" class="col-md-4 col-sm-6 col-xs-12">
      <div class="text-center">
        <img src="template/image/725.GIF" class="avatar img-circle img-thumbnail" style="display:none" alt="avatar">
        <img src="<?php echo $rowuser['profile_logo']; ?>" class="avatar img-circle img-thumbnail" alt="avatar">
        <h6>Upload a different photo...</h6>
        <form role="form" id="logoform" enctype="multipart/form-data">
        <input id="logo" name="logo" type="file" class="text-center center-block well well-sm">
        </form>
      </div>
    </div>

để sử dụng dữ liệu biểu mẫu với jquery, bạn phải đặt các tùy chọn chính xác

$.ajax({
    url : "/function/pro_pic_upload.php",
    type: "POST",
    data : postData,
    processData: false,
    contentType: false,
    success:function(data, textStatus, jqXHR){
        $("#pro_pix img").last().show();
        $("#pro_pix img").first().hide();
        $("#pro_pix h6").text(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
        //if fails     
    }
});

.ajax tham chiếu

processData (mặc định: true)

Loại: Boolean

Theo mặc định, dữ liệu được chuyển vào tùy chọn dữ liệu dưới dạng một đối tượng (về mặt kỹ thuật, bất kỳ thứ gì khác ngoài chuỗi) sẽ được xử lý và chuyển đổi thành chuỗi truy vấn, phù hợp với loại nội dung mặc định "application / x-www-form-urlencoded" . Nếu bạn muốn gửi DOMDocument hoặc dữ liệu không được xử lý khác, hãy đặt tùy chọn này thành false.

Thêm hai tham số này vào AJAX của bạn để giải quyết vấn đề của bạn:

processData: false,
contentType: false,

Bạn phải đặt tham số này trong lệnh gọi ajax:

enctype: 'multipart/form-data'

Thêm:

processData: false,
contentType: false,

chắc chắn sẽ giúp ích với tệp, một bên là nếu bạn đang thực hiện bất kỳ loại chuyển lỗi hoặc thông báo thành công nào trở lại trang, bạn sẽ muốn sử dụng json để làm cho cuộc sống của bạn dễ dàng hơn.

thí dụ:

dataType: 'json',

điều này sẽ giúp phân tích câu trả lời của bạn. Nếu không có nó, nó sẽ tạo ra một lỗi.

Chỉ cần chỉnh sửa dòng của bạn:

var postData = new FormData(this);

đến:

var postData = new FormData($(this));