Today, We want to share with you Multiple Image upload preview remove option.In this post we will show you Multiple image upload with preview and delete option using jQuery, hear for Multiple Image Upload with preview and delete option-php/ Ajax we will give you demo and example for implement.In this post, we will learn about multiple image upload with preview and delete option using jquery php with an example.
Multiple Image upload preview remove option
There are the Following The simple About Multiple Image upload preview remove option Full Information With Example and source code.
As I will cover this Post with live Working example to develop select and remove multiple images with preview before upload, so the Image Upload with Preview and Delete for this example is following below.
JavaScript
simple upload multiple images in php with preview using jQuery/javascript
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var filesAmount = input.files.length;
console.log(filesAmount);
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(e) {
var d = $('.imagePreview:first').clone()
d.css('background-image', 'url('+e.target.result +')');
d.html('<span class="img-delete"><b class="remove_icon">X</b></span>');
d.hide();
d.fadeIn(650);
$('.member-preview').append($(d));
$(".img-delete").click(function(){
$(this).parent(".imagePreview").remove();
});
}
reader.readAsDataURL(input.files[i]);
}
}
}
$("#imageUpload").change(function() {
readURL(this);
});
</script>
Image upload preview remove option
Full Source code for Image Upload with preview
simple Multiple File Upload with Thumbnail Preview using HTML5 and Client Side Scripts
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Image Upload with preview</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style type="text/css">
body {
background: whitesmoke;
font-family: 'Open Sans', sans-serif;
}
.container {
max-width: 960px;
margin: 30px auto;
padding: 20px;
}
h1 {
font-size: 20px;
text-align: center;
margin: 20px 0 20px;
}
h1 small {
display: block;
font-size: 15px;
padding-top: 8px;
color: gray;
}
.member-upload {
position: relative;
max-width: 205px;
margin: 50px auto;
}
.member-upload .member-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
}
.member-upload .member-edit input {
display: none;
}
.member-upload .member-edit input + label {
display: inline-block;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.member-upload .member-edit input + label:hover {
background: #f1f1f1;
border-color: #d6d6d6;
}
.member-upload .member-edit input + label:after {
content: "\f040";
font-family: 'FontAwesome';
color: #757575;
position: absolute;
top: 10px;
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.member-upload .member-preview {
width: 192px;
height: 192px;
position: relative;
border-radius: 100%;
border: 6px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.member-upload .member-preview > div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.img-delete {
display: inline-block;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.remove_icon{
padding: 5px;
color: red;
font-weight: 900;
top: 10px;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery Image Upload
<small>with preview</small>
</h1>
<p>Multiple Image Upload with preview and delete option</p>
<div class="member-upload">
<div class="member-edit">
<input type='file' id="imageUpload" multiple accept=".png, .jpg, .jpeg" />
<label for="imageUpload"></label>
</div>
<div class="member-preview">
<div class="imagePreview" style="background-image: url(https://us.123rf.com/450wm/aguiters/aguiters1508/aguiters150800059/43551287-stock-vector-photo-camera-icon.jpg?ver=6);">
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var filesAmount = input.files.length;
console.log(filesAmount);
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(e) {
var d = $('.imagePreview:first').clone()
d.css('background-image', 'url('+e.target.result +')');
d.html('<span class="img-delete"><b class="remove_icon">X</b></span>');
d.hide();
d.fadeIn(650);
$('.member-preview').append($(d));
$(".img-delete").click(function(){
$(this).parent(".imagePreview").remove();
});
}
reader.readAsDataURL(input.files[i]);
}
}
}
$("#imageUpload").change(function() {
readURL(this);
});
</script>
</body>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Multiple Image upload preview remove option.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.