При нажатии удалить изображение из нескольких полей ввода и загрузить оставшиеся в базу данных.

Question

Я занимаюсь разработкой сайта, который позволяет загружать несколько изображений для одного идентификатора. Но я хочу загрузить изображения в текстовом формате в базу данных, а реальное изображение - в мой каталог . Но перед загрузкой изображения в базу данных я просматриваю изображения с помощью FileReader JavaScript.

Моя проблема заключается в том, что, когда я нажимаю удалить в предварительном просмотре, это изображение также должно быть удалено из изображений, которые я хочу загрузить. И во-вторых, я не знаю, как это сделать, когда я щелкаю первый раз и выбираю несколько изображений, затем снова выбираю некоторые изображения, щелкая поле ввода, изображения, выбранные второй раз, загружаются в базу данных вместо всех.

Вот мои коды

 // 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 фрагмент кода

<?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 = "";

}

Для очистки поля ввода, и если оно будет очищено, оно не будет загружено.

Примечание: Для получения более подробной информации Нажмите здесь