使用PHP和javascript的Jquery在一个页面上显示多个图像的预览_Javascript_Php_Jquery

使用PHP和javascript的Jquery在一个页面上显示多个图像的预览

javascript php jquery

使用PHP和javascript的Jquery在一个页面上显示多个图像的预览,javascript,php,jquery,Javascript,Php,Jquery,我有一个html页面，用户应该上传几个不同屏幕分辨率的图片。我需要一个单独的文件选择和预览每个图片，所以我可以存储在正确的地方上传的图片。使用一个multiselect，几乎不可能确定哪张图片属于哪种类型文件选择没有问题，但由于我不是Jquery程序员的JavaScript，获取预览没有问题，但是所有预览图像都出现在第一张图片中此代码将显示带有占位符和文件选择的页面： <?php session_start(); ?> <!DOCTYPE html> <

我有一个html页面，用户应该上传几个不同屏幕分辨率的图片。我需要一个单独的文件选择和预览每个图片，所以我可以存储在正确的地方上传的图片。使用一个multiselect，几乎不可能确定哪张图片属于哪种类型

文件选择没有问题，但由于我不是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>';
    }
?>

现在所有图像都显示在第一个占位符中，但我需要将它们显示在与文件选择器相同的行中。我知道Jquery部分负责显示图像，它被编码为在previewimg中显示图像，但我不知道如何使用其他div id

有人能帮我吗？

按照目前的设置方式，您可以添加一个文件，然后表单提交该文件，然后通过JS将其添加到dom中

但是，由于表单每次都提交并刷新页面，因此对于上次提交的图像，您只能将PHP中的$u FILES info保存到DB中

我会这样做：

<?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>


洛尔斯
中等
高清
超高清

我在您的示例中看到的问题是提交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 && 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>


洛尔斯
中等
高清
超高清
函数获取图像（分辨率）{
var form_data=new FormData（）；
var file=document.getElementById（res.files[0]；
表格_data.append（“文件”，文件）；
表格_数据。附加（“res”，res）；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var image=document.createElement（“img”）；
setAttribute（“src”，“images/”+this.responseText）；
document.getElementById（res+“U单元格”）.prepend（图像）；
}
};
open（“POST”，“test2.php”，true）；
发送（表单数据）；
}

test2.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;
}
?>

看起来您有几个HTML

img

标签，它们的ID相同（

您的解决方案可以正常工作，但每次上传后，页面都会刷新。我的代码只是页面上的一部分，需要很长时间。页面上还有很多内容，重新加载需要几秒钟。这就是为什么我需要将图像直接写入DOM。
<?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;
}
?>