#javascript #php #jquery
Вопрос:
Я хочу просмотреть несколько изображений перед их загрузкой в PHP. Я могу показать предварительный просмотр всех изображений с помощью jQuery и могу удалить их по щелчку, но после удаления изображения в пользовательском интерфейсе удаленное изображение все равно загружается.
$("#pimage").change(function() {
$('#image-preview').html("");
var total_file = document.getElementById("pimage").files.length;
for (var i = 0; i < total_file; i ) {
$('#image-preview').append("<div class='col-md-4 fimgs'><img src='" URL.createObjectURL(event.target.files[i]) "' class='img-responsive'><br><span class='removeimage'>X</span></div>");
}
$(".removeimage").click(function() {
// alert('Hi');
$(this).parent(".fimgs").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="index.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<textarea class="form-control" id="post_feed" name="post_feed" rows="3" placeholder="What's on your mind?"></textarea>
</div>
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-12">
<input type="submit" name="submit" value="Post" class="btn btn-dark">
</div>
<div class="col-md-2 col-lg-2 col-sm-12">
<label for="pimage"><i class="fa fa-image"></i></label>
<input type="file" multiple name="pimage[]" id="pimage" class="imc" style="display:none">
</div>
<div class="col-md-2 col-lg-2 col-sm-12">
<label for="pvideo"><i class="fa fa-file-audio-o" aria-hidden="true"></i>
</label>
<input type="file" id="pvideo" multiple name="pvideo[]" class="imc" style="display:none;"> </div>
</div>
<div class="image-preview row" id="image-preview"></div>
</form>
Комментарии:
1. После вызова val(«) все файлы становятся пустыми. Он просто загружает пустой файл.