使用 PHP 和 JavaScript 的 Jquery 在一頁上顯示多個圖像的預覽

Question

我有一個 html 頁面，用戶應該在其中上傳多張不同屏幕分辨率的圖片。 我需要對每張圖片進行單獨的文件選擇和預覽，以便我可以在上傳時將圖片存儲在正確的位置。 使用一個多選幾乎不可能找出哪張圖片屬於哪一種類型。

文件選擇沒有問題，但由於我不是Jquery程序員的JavaScript，所以獲取預覽沒有問題，但是所有預覽圖像都出現在第一張圖片中。

此代碼將顯示一個帶有占位符和文件選擇的頁面：

<?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 && 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-id。

有人可以幫我嗎？

Answer 1

您目前的設置方式是，您可以添加一個文件，然后表單提交，然后通過 JS 將其添加到 dom 中。

但是，由於表單每次都會提交並刷新頁面，因此您將在 PHP 中只有 $_FILES 信息可以保存到數據庫中，以便為最后提交的圖像保存。

我這樣做的方式是這樣的：

<?php
session_start();

if(isset($_FILES['lowres']) && !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']) && !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']) && !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']) && !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']) && !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']) && !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']) && !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']) && !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>

Answer 2

我在您的示例中看到的問題是提交 4 個表單並且一次只能處理一張圖像，除非您有某種方法可以處理一起提交的所有表單。

你可以這樣試試：

測試1.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 && 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>

測試2.php：

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

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

使用 PHP 和 JavaScript 的 Jquery 在一頁上顯示多個圖像的預覽

問題描述

2 個解決方案

解決方案1
0 2019-04-16 15:47:51

解決方案2
0 2019-04-17 09:08:02

使用 PHP 和 JavaScript 的 Jquery 在一頁上顯示多個圖像的預覽

問題描述

2 個解決方案

解決方案1 0 2019-04-16 15:47:51

解決方案2 0 2019-04-17 09:08:02

解決方案1
0 2019-04-16 15:47:51

解決方案2
0 2019-04-17 09:08:02