FIle上传到MySQL Blob dataype某些图像无法正确呈现

Question

我使用javascript FileReader上传图片文件，我的代码如下所示：获取二进制数据：

var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        $(".image-preview-input-title").text("Change");
        $(".image-preview-clear").show();            
        img.attr('src', e.target.result);
        $(".image-preview-filename").val(file.name);  
        $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
        $("#create_image").val(e.target.result);
        $("#edit_image").val(e.target.result);
        $("#create_image_name").val(file.name);
        $("#edit_image_name").val(file.name);
    }        
    reader.readAsDataURL(file);

和我的ajax代码我使用序列化表格

 var dataSerialize = $("#create-interred-form").serialize();

                $.ajax({
                    type: "POST",
                    url: "./db.php?action=createInterred",
                    data: dataSerialize,
                    success: function (data){
                        if (data == "200") {
                            swal({
                                title: "New Interred successfully created!",
                                text: "",
                                type: "success",
                                allowOutsideClick: false,
                                allowEscapeKey: false
                            },
                            function(){
                                location.reload();
                            });
                        } else {
                            swal("Error!","An unexpected error occur. Please try again later.", "error");
                        }
                    }                       
                });

在我的PHP代码中，我使用一个简单的查询来保存和检索：

保存：

function createInterred(){
    include ('config.php');
    $user_id = $_POST['userList'];
    $interred_name = $_POST['interred_name'];
    $date_birth = $_POST['date_birth'];
    $date_death = $_POST['date_death'];
    $date_interred = $_POST['date_interred'];
    $date_purchased = $_POST['date_purchased'];
    $class_id = $_POST['class'];
    $block = $_POST['block'];
    $lot = $_POST['lot'];
    $phase = $_POST['phase'];
    $latitude = $_POST['create_latitude'];
    $longitude = $_POST['create_longitude'];
    $created_by = $_POST['created_by'];
    $date_created = $_POST['date_created'];
    $image = $_POST['create_image'];
    $image_name = $_POST['create_image_name'];

    try {
        $stmt = $dbh->prepare("INSERT INTO interred(user_id, interred_name, date_interred, date_purchased, class_id, block, lot, phase, latitude, longitude, created_by, date_created, date_birth, date_death, image, image_name) VALUES(:user_id, :interred_name, :date_interred, :date_purchased, :class_id, :block, :lot, :phase, :latitude, :longitude, :created_by, :date_created, :date_birth, :date_death, :image, :image_name)");
        $stmt->execute(array(
            ':user_id' => $user_id,
            ':interred_name' => $interred_name,
            ':date_interred' => $date_interred,
            ':date_purchased' => $date_purchased,
            ':class_id' => $class_id,
            ':block' => $block,
            ':lot' => $lot,
            ':phase' => $phase,
            ':latitude' => $latitude,
            ':longitude' => $longitude,
            ':created_by' => $created_by,
            ':date_created' => $date_created,
            ':date_birth' => $date_birth,
            ':date_death' => $date_death,
            ':image' => $image,
            ':image_name' => $image_name
        ));
    } catch (Exception $e){
        echo "500";
    }

    echo "200";

    $dbh = null;
}

提取：

function getAllInterred(){
    include ('config.php');

    try{
        $stmt = $dbh->prepare("SELECT * FROM  interred AS i, user AS u, user_info AS ui WHERE i.user_id = u.user_id AND u.user_info_id = ui.user_info_id ORDER BY interred_name"); 
        $stmt->execute();
        $count = $stmt->rowCount();
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

        if ($count > 0){
            $json = json_encode($result);
            echo $json;
        } else {
            echo "300";
        }
    } catch (Exception $e){
        echo "500";
    }

    $dbh = null;
}

现在我用它将我的检索结果保存在变量列表中，并迭代每个值以显示在ul li中。当用户点击li项目时，我使用过滤器来获取所选项目的值

 var result = $.grep(allInterredList, function(e){ return e.interred_id == interredSelected; });

        if (result.length > 0) {
            $("#oInterredName").html(result[0].interred_name);
            $("#oDateBirth").html(moment(result[0].date_birth).format('MMMM DD, YYYY'));
            $("#oDateDeath").html(moment(result[0].date_death).format('MMMM DD, YYYY'));
            $("#oDateInterred").html(moment(result[0].date_interred).format('MMMM DD, YYYY'));
            $("#oLotOwner").html(result[0].fname + " " + result[0].lname);
            $("#oAddress").html(result[0].address);
            $("#oPhone").html(result[0].contact_no); 
            $("#oDatePurchased").html(moment(result[0].date_purchased).format('MMMM DD, YYYY')); 
            $("#oBlock").html(result[0].block); 
            $("#oLot").html(result[0].lot); 
            $("#oPhase").html(result[0].phase);
            if (result[0].class_id == 1){
                $("#oClass").html("LA - Lot Area");  
            } else if (result[0].class_id == 2){
                $("#oClass").html("BC- Bone Chamber");  
            } else if (result[0].class_id == 3){
                $("#oClass").html("FE - Family Estate");  
            } else {
                $("#oClass").html("GA - Garden Area");  
            }
            $("#oCreatedBy").html(result[0].created_by);
            $("#oDateCreated").html(moment(result[0].date_created).format('MMMM DD, YYYY'));
            $("#oModifiedBy").html(result[0].modified_by);
            $("#oModifiedDate").html((result[0].date_modified == undefined) ? '' : moment(result[0].date_modified).format('MMMM DD, YYYY'));
            $("#oImage").attr('src', (result[0].image != null && result[0].image != "") ? result[0].image : "img/no_image_found.gif");
            $("#btnViewMap").prop('disabled', false);
        } else {
            swal({
                title: "Unexpected Error Occured!",
                text: "Cannot find the selected user data. Logging out.",
                type: "error",
                allowOutsideClick: false,
                allowEscapeKey: false
            },
            function(){
                sessionStorage.clear();
                window.location.href = "index.html";
            });
        }

现在，我的问题是一些图像显示正确。以下示例

虽然显示此错误

这是错误行：

注意：与底部图像相比，上面的图像具有更大的文件大小