Question

我有一个包含7个选项的选择表单。根据所选的选项，将显示其中一个div（我使用jquery完成了这个）。

    <select class="form-control" id="select-1" style="width: 70%;margin: 0 
    auto;">
                <option selected disabled>Choose a product..</option>
                <option value="img-upload">Pencil art</option>
                <option value="img-upload">Oil painting</option>
                <option value="img-upload">Digital painting</option>
                <option value="img-upload">Invert art</option>
                <option value="typography-select">Typography</option>
                <option value="photo-restoration-select">Photo Restoration</option>
            </select>

如果我选择前4个选项，则显示带有类img-upload的div。该div用于上传图像。

<div class="img-upload" style="margin-top: 20px;">
            <div class="row">
                <?php echo $image_view ?>      
                <form method="post" enctype="multipart/form-data" class="center-block">
                    <input type="file" name="fileToUpload" id="fileToUpload" style="margin: 10px auto;">
                    <input type="submit" value="Upload Image" name="submit" class="btn btn-default center-block img-upload-btn" style="margin-bottom: 10px;">
                    <?php echo $error_msg."".$success_msg ?>
                </form>
        </div>
    </div>

单击按钮上传图像时，php脚本会运行以检查文件是否为图像。

<?php
$error_msg = "";
$success_msg = "";
$image_view = "";
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
    $uploadOk = 1;
} else {
    $error_msg .= '<p class="text-center" style="color:red;">File is not an image.Please upload a valid image format.</p>';
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
    if ($uploadOk == 0) {
        $error_msg .= "";
    // if everything is ok, try to upload file
    } else {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        $success_msg .= '<p class="text-center" style="color:green;">Your photo has been uploaded.</p>';
        $image_view .= '<img src="'.$target_file.'" alt="Cover" class="img-responsive center-block" style="height: 250px;width: auto;">';
        } else {
          $success_msg .= '<p class="text-center" style="color:red;">Sorry, there was an error uploading your file.Please try again later.</p>';
        }
    }
}
?>

根据所选选项显示和隐藏div的jquery：

$('.img-upload').hide();
        $('.typography-select').hide();
      $('.photo-restoration-select').hide();
        $(function() {
        $('#select-1').change(function(){
            if ($(this).val() == "img-upload") {
                $('.img-upload').show();
                $('.typography-select').hide();
                $('.photo-restoration-select').hide();
            }else if ($(this).val() == "typography-select") {
                $('.typography-select').show();
                $('.img-upload').hide();
                $('.photo-restoration-select').hide();
            }else if ($(this).val() == "photo-restoration-select") {
                $('.photo-restoration-select').show();
                $('.img-upload').hide();
                $('.typography-select').hide();
            }
        });
        });

问题是，当页面加载时，会出现选择。如果我选择前四个选项之一，则应显示.img-upload div。（当我选择前四个选项中的任何一个时显示，问题。）

但是当我尝试选择图像并按上传时，.img-upload div就会消失。

我试图解决这个问题，但无法解决问题。任何帮助表示赞赏。

谢谢！

Answer 1

这有点奇怪的实现你到那里（为什么不捕获当前选择的选项并切换所有的兄弟姐妹，反之亦然）..但无论如何，从快速看我可以告诉你，你应该用ajax处理这个提交以防万一你不希望再次渲染DOM并加载你的jQuery的第一行，上面写着 $（'。img-upload'）。hide（）; ，实际上每次刷新都会隐藏你的div

Answer 2

如果单击提交按钮，表单将发布到您的服务器 - 很可能这会导致页面刷新和页面加载，您的jQuery将隐藏.img-upload div。你确定没有按照你想要的方式发布吗？

按下提交时div会消失

2 个答案: