0
我有7种选择的选择表单。根据选定的选项，将显示其中一个div（我已经使用jquery完成了此操作）。按下提交时，div将消失
<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>';
}
}
}
?>
jQuery的基础上选择的选项，以显示和隐藏的div：
$('.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();
}
});
});
的问题是，当页面加载时，选择是appeared.If我选择的前四个选项之一，应该显示.img-upload div（当我选择前四个选项时显示，没有问题）
但是当我尝试选择图像并按上传时，.img-upload div是disapeared。
我试图解决这个问题，但不能解决问题。任何帮助表示赞赏。
谢谢！