Как отобразить изображение BLOB из MySQL через AJAX? - PullRequest
Новая
       10

Как отобразить изображение BLOB из MySQL через AJAX?

0 голосов
/ 12 декабря 2018

Мне нужна помощь о том, как отобразить изображение LONGBLOB из базы данных MySQL.Я беру изображение из файла PHP, который выбрал изображение из базы данных MySQL.Кроме того, я добавляю значение из AJAX в HTML.Таким образом, в HTML должен быть столбец в таблице с изображением.Но это не отображение.Это пример того, как это выглядит в настоящее время.

https://drive.google.com/open?id=1M-GVR9STfwzjLLOOnj7qHTFBT4POZ5rL

В настоящее время в части AJAX я использую base64 в столбце для img src.Пожалуйста помоги мне с этим.Спасибо.Вот мой код

//For search country function
$("#search-btn").on("click", function () 
    {   
        if(document.getElementById("search").value.length < 3)
        {
            alert("The characters MUST NOT be less than 3!");
            return false;
        }


        $("#records").empty();
        $(".records").empty();
        $('.searchResults').empty();

        var searchCountry = $("#search").val();

        $.get(
                'searchCountryRecords.php',
                {id: searchCountry}, //left->sql id ,right->script id
                function (data)
                {
                    if (!$.trim(data)){   
                        alert("No country with that name is found!");
                        return false;
                    }

                    var userRole = "<?php echo $userRole; ?>";

                    var string = "";

                    string += '<table id="tbl_countries" class="table table-bordered table-hover">';
                    string += '<tr>';
                    string += '<th>Flag</th>';
                    string += '<th>Country Name</th>';
                    string += '<th width=200px>Region</th>';
                    string += '<th>Surface Area</th>';
                    string += '<th>Population</th>';
                    string += '<th width=150px>Independent Year</th>';
                    string += '<th width=100px>City Details</th>';
                    if (userRole === "admin")
                    {
                        string += '<th width=100px>More Details</th>';
                        string += '<th width=100px>Update Details</td>';
                        string += '<th width=100px>Upload Flag</td>';
                    }
                    string += '</tr>';

                    /* from result create a string of data and append to the div */
                    $.each( data, function( key, value ) 
                    { 
                        $("#records").empty();
                        string += "<tr>";
                        //string += "<td>"+"<img src='data:image/png;base64,base64_encode("+value['image']+")"+"'/>"+"</td>";
                        string += "<td>"+"<img src='data:image/jpeg;base64', value="+value['image']+">"+"</td>";
                        string += "<td>"+value['Name']+"</td>";
                        string += "<td>"+value['Region']+"</td>";
                        string += "<td>"+value['SurfaceArea']+"</td>";
                        string += "<td>"+value['Population']+"</td>";
                        string += "<td>"+value['IndepYear']+"</td>";
                        string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#cityModal' id='city_details' name='city_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
                        if (userRole === "admin")
                        {
                        string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#countryModal' id='more_details' name='country_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
                        string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#updateModal' id='update_HOS' name='update_HOS' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-edit'></i></button>" + "</td>";
                        string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#uploadModal' id='upload_flag' name='upload_flag' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-flag'></i></button>" + "</td>";
                        }
                    string += "</tr>";
                    }); 

                    string += '</table>'; 
                    $("#records").append(string); 
                }
            );
    }); // end of search function

1 Ответ

0 голосов
/ 14 декабря 2018

Нельзя встраивать двоичные данные в JSON, поскольку они будут повреждены.Вот почему ваш сервер должен кодировать изображение в Base64 перед отправкой его клиенту.В качестве плохого, но простого примера: если вы используете MySQL 5.6+, вы можете добавить TO_BASE64(image) AS b64_image в свой оператор SELECT.Но для повышения производительности кодируйте изображения в Base64, используя PHP, а не MySQL.

Кроме того, вам нужно исправить код JavaScript, заменив: 

"<td>"+"<img src='data:image/jpeg;base64', value="+value['image']+">"+"</td>";

на: 

"<td><img src='data:image/jpeg;base64',"+value['b64_image']+"></td>";
...