Question

我试图通过Ajax发送一些数据，这些数据可能包含图像。

我没有任何形式，所以我无法通过传统方式提交。

这是我的HTML：

<input type="file" accept="image/png,image/jpg,image/jpeg,image/bmp" id="addProduct_image">

每当用户更改文件时，我都会获得该值。

var files;

$(document).on('change', '#addProduct_image', function(e){
    prepareUpload(e);
});

function prepareUpload(event){
  files = event.target.files;
}

按下OK按钮后，我调用ajax功能。

$(document).on('click', '#addProduct_OK', function(e){
    var img = new FormData();
    $.each(files, function(key, value)
    {
        img.append(key, value);
    });

    $.ajax({
        url: 'responses/product.php?type=productAdd',
        type: 'POST',
        data: {title: $("#addProduct_title").val(), description: $("#addProduct_description").val(), 
               image: img, status: $("#addProduct_status").val()
              },
        success: function(data){
            console.log(data);
        }
    });
});

我目前在Chrome控制台上收到错误

未捕获的TypeError：非法调用

在ajax线上。我还远离如何通过ajax与其他数据发送图像？

Answer 1

您需要将FormData作为ajax请求的数据发送，因此其他参数也必须附加到fomdata

$(document).on('click', '#addProduct_OK', function (e) {
    var img = new FormData();
    $.each(files, function (key, value) {
        img.append(key, value);
    });
    img.append('title', $("#addProduct_title").val());
    img.append('description', $("#addProduct_description").val());
    img.append('status', $("#addProduct_status").val());

    $.ajax({
        url: 'responses/product.php?type=productAdd',
        type: 'POST',
        data: img,
        processData: false,
        contentType: false,
        success: function (data) {
            console.log(data);
        }
    });
});

Ajax在数据中发送图像

1 个答案: