单击时，从多个输入字段中删除图像并将剩余的图像上传到数据库中

Question

我正在开发一个允许为一个 ID 上传多张图片的网站。但我想将图像以文本格式上传到数据库，将真实图像上传到我的目录。但在将图像上传到数据库之前，我使用 JavaScript 的 FileReader 预览图像。

我的问题是，当我在预览图像中单击删除时，该图像也应该从我要上传的图像中删除。 其次，我不知道该怎么做，当我第一次单击并选择一些图像时，然后再次 我通过单击输入字段选择了一些图像，第二次选择的图像被上传到数据库而不是全部。

这是我的代码

 // image preview
    $("#productImage").on("change", function(e) {
        var files = e.target.files,
            filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();

            fileReader.onload = (function(e) {
                var file = e.target;
                $('.image-preview').append("<div class=\"product-image\">" +
                    "<img class=\"image-thumb\" src=\"" + e.target.result +
                    "\" title=\"" + file.name + "\" + data-file = \"" + file.name +
                    "\"/>" +
                    "<br/><div class=\"remove-image\">&#10060;&nbsp;Remove</span>" +
                    "</div>");
                $('.remove-image').click(function(e) {
                    $(this).parent('.product-image').remove();
                });
            });
            fileReader.readAsDataURL(f);
        }
    });

.form-elements {
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding: 10px 0;
}
.form-elements .input-label {
    padding: 10px 0;
}

.input-label label {
    font-family: sans-serif;
    font-size: 20px;
    color: #fff;
}
.image-preview {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    margin-bottom: 5px;
}

.image-preview .product-image {
    display: block;
    margin: 5px 10px;
    width: 150px;
    text-align: center;
}

.image-preview .product-image .image-thumb {
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
}

.image-preview .product-image .remove-image {
    padding: 5px;
    margin: 5px 0;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 15px;
    background: #ff3636;
    color: #fff;
    cursor: pointer;
}

.image-preview .product-image .remove-image:hover {
    background: red;
}

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<!--         product images       -->
                <div class="form-elements outside">
                    <div class="input-label">
                        <label for="productName">Select product image(s)</label>
                    </div>
                    <div class="image-preview">
                        <!--     Images will be here            -->
                    </div>
                    <input type="file" id="productImage" name="productImage[]" multiple />
                </div>

PHP代码sn-p

<?php
//connection
$connect = mysqli_connect('localhost','root','','sahi_chuno_db');

    $image = $_FILES['productImage']['name'];
    $temp_image = $_FILES['productImage']['tmp_name'];
    $product_id = 1;

    for ($i=0; $i < count($image); $i++) { 
        $query = $connect->prepare("INSERT INTO `product_images` (`product_id`, `product_image`) 
                                    VALUES(?, ?)");
        $query -> bind_param('is',$product_id, $image[$i]);
        $run = $query -> execute();
        if($run){
            //move images to directory
            move_uploaded_file($temp_image[$i], "../uploads/$image[$i]");
        }  else{
            echo "Not uploaded";
        }
    }

?>

Answer 1

你可以使用

<button onclick = "myFunction()">Remove</button> /在预览中删除按钮

function myFunction() {
document.getElementById("productImage").value = "";

}

清空输入框，如果清空就不会上传了。

注意：更多详情Click Here