Question

我创建了一个动态上传，我希望在裁剪图像后将每个blob发送到服务器。问题是它只发送了最后一个追加，我不知道为什么。

var g = 0;    
for(var j = 1;j <= boxno;j++) //boxno = 4 pics (I can have as much as I want)
{
    input = $("#input"+j);
    if(input.val().length !== 0)//check if input has any values
    {
        pcanvas = $("#pcanvas"+j)[0];
        context = pcanvas.getContext("2d");
        formData = new FormData($(this)[0]);
        var blob = dataURLtoBlob(pcanvas.toDataURL('image/png'));
        formData.append("pcanvas_"+g+"[]", blob);
        g++;
    }
}

var info = {
    userid:userId,
    username:userName,
    picNr: g
}

formData.append("info[]", info["userid"]);
formData.append("info[]", info["username"]);
formData.append("info[]", info["picNr"]);

$.ajax({
    url: "/send.php",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
        console.log(data);
    },
    error: function(data) {
        console.log("error");
    },
    complete: function(data) {}
});

function dataURLtoBlob(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);
        return new Blob([raw], {
            type: contentType
        });
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {
        type: contentType
    });
}

现在如果我发送使用此方法只发送“pcanvas3”，最后一个循环。但是，如果我把循环中的$ .ajax工作，但我不想这样，因为我想添加到我的数据库中并且添加4倍相同的结果（我也为特定上传创建了新文件夹，所以如果我在循环内添加了$ .ajax它创建了4个文件夹）

这是我的PHP。

$id = $_POST['info'][0];
$username = $_POST['info'][1];
$picNr = $_POST['info'][2];
$shuffledid = str_shuffle($id);
$uniqueid = $id.$shuffledid;
$path = $_SERVER['DOCUMENT_ROOT'].'/_user/_tests/en/'.$uniqueid;
if(!file_exists($path))
{
    mkdir($path,0755);
}
for($g = 0; $g <= $picNr; $g++)
{
    $virtualbg = imagecreatetruecolor(400,410);
    $tmp_file = $_FILES['pcanvas_'.$g]['tmp_name'][0];
    $pic = imagecreatefrompng($tmp_file);
    list($width,$height,$type) = getimagesize($tmp_file);
    imagecopyresampled($virtualbg,$pic, 0,0,0,0, 400,410,$width,$height);
    imagejpeg($virtualbg,$path.'/pic_'.$g.'.jpg');
    imagedestroy($pic);
    imagedestroy($virtualbg);
}

正如你所看到的，我正在通过每个“pcanvas_0,1,2,3,4”，但只有最后一个获得了tmp_files。我做错了什么？我认为问题出在我的追加上。我试图在formData上添加别的东西（“pcanvas ..它可以工作，但我的blob没有附加。

谢谢！

将blob图像发送到php

0 个答案: