如何通过ajax post发送图片？

Question

我正在尝试通过ajax post发送一些数据，我尝试了序列化，但我不断收到错误，文件名不存在。 表格数据

$('#send #submit').on('click', function(e){
  e.preventDefault();
  $.post( "send.php", $("#bend").serialize())
    .done(function( data ) {
      alert( "Data Loaded: " + data );
    });
});

当您单击“提交”时，我尝试的第一件事就是获取我得到的文件大小

警告：getimagesize()：文件名不能为空

$dateityp = GetImageSize($_FILES['datei']['tmp_name']);

Answer 1

您可以转换为base64。一种方法是将图像绘制到画布上并使用

.toDataURL

。

您可以将图像传递给我在谷歌上找到的这个函数进行base64编码：

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

然后像这样通过AJAX上传：

$.ajax({
  type: "POST",
  url: "send.php",
  data: {image: img}
}).done(function( respond ) {
  console.log(respond);
});

Answer 2

 var file_data = $('#truckattachmentForm #receipts').prop('files')[0];
        var form_data = new FormData($('#truckattachmentForm')[0]);
        form_data.append('file', file_data);
        $.ajax({
            url: web_url + '/admin/truck/storeTruckAttachment',
            type: "POST",
            dataType: "json",
            data: form_data,
            cache: false,
            contentType: false,
            processData: false,
            statusCode: {
                200: function (xhr) {}
            }
      });