Показывать предварительные просмотры нескольких изображений на одной странице с помощью PHP и Jquery на javascript

ProgramBox

Показывать предварительные просмотры нескольких изображений на одной странице с помощью PHP и Jquery на javascript

Post author:admin
Запись опубликована:6 февраля, 2023
Post category:Вопросы по программированию

#javascript #php #jquery

Вопрос:

У меня есть html-страница, на которую пользователь должен загрузить несколько изображений для разных разрешений экрана. Мне нужен отдельный выбор файла и предварительный просмотр для каждого изображения, чтобы я мог сохранять изображения в нужных местах при загрузке. С помощью одного множественного выбора практически невозможно определить, какое изображение принадлежит какому типу.

Выбор файлов не является проблемой, но поскольку я не программист JavaScript или Jquery, получение предварительного просмотра не является проблемой, но все изображения предварительного просмотра отображаются на первом изображении.

Этот код отобразит страницу с заполнителями и выбранными файлами:

 <?php
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Upload Image using form</title>
        <link href="style.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="imageupload.js"></script>
    </head>
    <body>
        <div id="mainform">
        <h2>Upload multiple images using forms</h2>
            <table>
            <?php
                echo '<tr><td><h3>Picture</h3></td></tr>';
                echo '<tr><td>LowRes</td><td>';
                loadPreview("div_PreviewPicLowRes",107, 71);
                echo '</td></tr><tr><td>Medium</td><td>';
                loadPreview("div_previewPicMedium",236, 157);
                echo '</td></tr><tr><td>HD</td><td>';
                loadPreview("div_previewPichd",320, 213);
                echo '</td></tr><tr><td>UltraHD</td><td>';
                loadPreview("div_previewPic4k",426, 284);
                echo '</td></tr>';
            ?>
            </table>
        </div>
    </body>
</html>


<?php
    function loadPreview($id = 'div', $x=420, $y=300 ) {
        echo '
        <div id="div'.$id.'">
            <div id="preview'.$id.'">
                <img id="previewimg" src=""  width="'.$x.'px" height="'.$y.'px">    
            </div>
            <div id="formdiv'.$id.'">
                <form action="" enctype="multipart/form-data" id="form'.$id.'" method="post" name="form'.$id.'">
                    <div id="upload'.$id.'">
                        <input type="file" name="file'.$id.'" accept="image/*">
                    </div>
                </form>
            </div>

        </div>';
    }
?>

Этот javascript отобразит предварительный просмотр:

 $(document).ready(function() {
    // Function for Preview Image.
    $(function() {
        $(":file").change(function() {
            if (this.files amp;amp; this.files[0]) {
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#message').css("display", "none");
        $('#preview').css("display", "block");
        $('#previewimg').attr('src', e.target.result);
    };
});

Теперь все изображения отображаются в первом заполнителе, но мне нужно показать их в той же строке, что и селектор файлов. Я знаю, что часть Jquery отвечает за отображение изображения, и она закодирована для отображения изображения в previewimg, но я не могу понять, как использовать другие идентификаторы div.

Может кто-нибудь, пожалуйста, помочь мне?

Ответ №1:

То, как вы настроены на данный момент, вы можете добавить один файл, и форма отправляет его, затем добавляется в dom через JS.

Однако, поскольку форма отправляет и обновляет страницу каждый раз, когда у вас будет только информация о $ _FILES в PHP для сохранения в БД для последнего отправленного изображения.

Я бы сделал это так:

 <?php
session_start();

if(isset($_FILES['lowres']) amp;amp; !empty($_FILES['lowres'])){
    $lowres_filename = $_FILES['lowres']['name'];
    move_uploaded_file( $_FILES['lowres']['tmp_name'], "images/$lowres_filename");
    $_SESSION['lowres'] = $lowres_filename;
}
if(isset($_FILES['medium']) amp;amp; !empty($_FILES['medium'])){
    $medium_filename = $_FILES['medium']['name'];
    move_uploaded_file( $_FILES['medium']['tmp_name'], "images/$medium_filename");
    $_SESSION['medium'] = $medium_filename;
}
if(isset($_FILES['hd']) amp;amp; !empty($_FILES['hd'])){
    $hd_filename = $_FILES['hd']['name'];
    move_uploaded_file( $_FILES['hd']['tmp_name'], "images/$hd_filename");
    $_SESSION['hd'] = $hd_filename;
}
if(isset($_FILES['uhd']) amp;amp; !empty($_FILES['uhd'])){
    $uhd_filename = $_FILES['uhd']['name'];
    move_uploaded_file( $_FILES['uhd']['tmp_name'], "images/$uhd_filename");
    $_SESSION['uhd'] = $uhd_filename;
}
?>

<table>
<tr>
    <td>LowRes</td>
    <td><?php
    if(isset($_SESSION['lowres']) amp;amp; !empty($_SESSION['lowres'])){
        echo '<img id="lowres" src="images/'.$_SESSION['lowres'].'">';
    }else{
        echo '<form enctype="multipart/form-data" method="POST"><input type="file" name="lowres" onchange="this.form.submit();"></form>';
    }
    ?></td>
</tr>
<tr>
    <td>Medium</td>
    <td><?php
    if(isset($_SESSION['medium']) amp;amp; !empty($_SESSION['medium'])){
        echo '<img id="medium" src="images/'.$_SESSION['medium'].'">';
    }else{
        echo '<form enctype="multipart/form-data" method="POST"><input type="file" name="medium" onchange="this.form.submit();"></form>';
    }
    ?></td>
</tr>
<tr>
    <td>HD</td>
    <td><?php
    if(isset($_SESSION['hd']) amp;amp; !empty($_SESSION['hd'])){
        echo '<img id="hd" src="images/'.$_SESSION['hd'].'">';
    }else{
        echo '<form enctype="multipart/form-data" method="POST"><input type="file" name="hd" onchange="this.form.submit();"></form>';
    }
    ?></td>
</tr>
<tr>
    <td>UltraHD</td>
    <td><?php
    if(isset($_SESSION['uhd']) amp;amp; !empty($_SESSION['uhd'])){
        echo '<img id="uhd" src="images/'.$_SESSION['uhd'].'">';
    }else{
        echo '<form enctype="multipart/form-data" method="POST"><input type="file" name="uhd" onchange="this.form.submit();"></form>';
    }
    ?></td>
</tr>
</table>

1. Ваше решение работает, но после каждой загрузки страница обновляется. Мой код — это только часть страницы, и это занимает много времени. На странице намного больше, и перезагрузка займет несколько секунд. Вот почему мне нужно записывать изображения непосредственно в DOM.

Ответ №2:

Проблема, которую я вижу в вашем примере, заключается в отправке 4 форм и возможности обрабатывать только одно изображение за раз, если у вас нет какого-либо способа обработки всех форм, отправляемых вместе.

Вместо этого вы можете попробовать это так:

Test1.php:

 <table>
<tr>
    <td>LowRes</td>
    <td id="low_cell"><input type="file" name="low" id="low" onchange="get_images('low');"></td>
</tr>
<tr>
    <td>Medium</td>
    <td id="med_cell"><input type="file" name="med" id="med" onchange="get_images('med');"></td>
</tr>
<tr>
    <td>HD</td>
    <td id="hd_cell"><input type="file" name="hd" id="hd" onchange="get_images('hd');"></td>
</tr>
<tr>
    <td>UltraHD</td>
    <td id="uhd_cell"><input type="file" name="uhd" id="uhd" onchange="get_images('uhd');"></td>
</tr>
</table>

<script>
function get_images(res){
    var form_data = new FormData();
    var file = document.getElementById(res).files[0];
    form_data.append("file", file);
    form_data.append("res", res);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if(this.readyState == 4 amp;amp; this.status == 200){
            var image = document.createElement("img");
            image.setAttribute("src", "images/" this.responseText);
            document.getElementById(res '_cell').prepend(image);
        }
    };
    xmlhttp.open("POST", "test2.php", true);
    xmlhttp.send(form_data);
}
</script>

test2.php:

 <?php
session_start();
if(isset($_POST['res'])){
    $res = $_POST['res'];
}

if(isset($_FILES['file']) amp;amp; !empty($_FILES['file'])){
    $file = $_FILES['file']['name'];
    move_uploaded_file($_FILES['file']['tmp_name'], "images/".$file);
    $_SESSION[$res] = $file;
    echo $file;
}
?>