Question

我有这个代码，你点击按钮上传多个文件。当用户选择图像时，它会自动上传文件，然后预览显示上传的文件。但是出现预览列表时会出现此错误（有时几张图片已成功加载）。

我使用Ajax和Form Data发送图像，返回成功上传图像名称的数组，并在完成后附加预览div。图片上传工作正常，所以我的代码就是Ajax成功回归：

$.ajax({
    url: 'process.php',
    type: 'POST',
    data: form_data,
    dataType: 'json',
    async: false,
    success: function (data) {
        if(data){
            $.each(data, function(index, value) {
                var img = "'../content/"+brand+"/"+category+"/"+value+".png'";
                $('<li id="product-'+value+'" class="product item-flex-2"><div class="list-menu border-bottom"><a href="#" title="Delete Product"><i id="delete-product-'+value+'" class="fa fa-remove pointer color-red-hover"></i></a></div><div id="img-'+value+'" class="img-wrapper" style="background-image:url('+img+')"></div></li>').insertBefore($('#product-new'));
                $('#upload-product').val();
            });
        } else {
            alert('Upload Failed.');
        }
    },
    cache: false,
    contentType: false,
    processData: false
});

这是处理上传文件的PHP文件上的代码：

$product = array();
$brand = $_POST['brand-owner'];
$category = $_POST['category'];
$res_dir = '../content/'.$brand.'/'.$category.'/';
$count = count($_FILES['upload-product']['name']);
$last_file = count(array_diff(scandir($res_dir), array('..', '.', 'index.html')));
$html_dir = $res_dir.'index.html';
for ($i = 0; $i < $count; $i++) {
    $last_file++;
    $tmp_file_name = $_FILES['upload-product']['tmp_name'][$i];
    $new_name = $res_dir.str_pad(($last_file),3,0,STR_PAD_LEFT).'.png';
    $create_png = imgToPng($tmp_file_name);
    if(imagepng($create_png, $new_name)){
        array_push($product,str_pad($last_file,3,0,STR_PAD_LEFT));
    }
}

generateHTML($html_dir, 'product', $brand, $category);

echo json_encode($product);

这里的imgToPng功能代码（如果需要）：

function imgToPng($tmp_file_name) { 
    $create_png = imagecreatefromstring(file_get_contents($tmp_file_name));
    imageAlphaBlending($create_png, true);
    imageSaveAlpha($create_png, true);
    return $create_png;
}

我也有预览菜单，上面有类似的代码，错误也出现在那里。我尝试过CTRL + F5来强制刷新，但只有在几次尝试后才能运行。我一直在寻找环顾四周，但大多数是关于Firefox的Bug（我在48.0.2上）或错误是在img标签上。我有另一个使用img标签的html页面并且没有显示错误，但我需要在此页面上使用div。

谢谢...

更新：转换为png后，图像看起来已损坏。我尝试使用原始扩展并正确加载图像。所以我的代码不正确或PHP函数有问题。

图像在DIV背景上损坏或截断

0 个答案: