how to remove single uploaded file from jQuery in multiple file upload
0
I've searched everywhere and still don't get what I want.
I've following input field.
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
I've made image preview and on a remove button click, image preview is removed. In this case, I want to remove uploaded image from file upload field as well. Is there any way to achieve this.
I've found a way to remove all uploaded files but not a particular image.
Any kind of help is appreciated and if you need further information then feel free to ask.
javascript jquery html file multiple-file-upload
edited Nov 23 '18 at 3:07
Shiladitya
9,43692031
asked Nov 23 '18 at 2:46
Sagar GautamSagar Gautam
4,33931644
add a comment |
0
I've searched everywhere and still don't get what I want.
I've following input field.
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
I've made image preview and on a remove button click, image preview is removed. In this case, I want to remove uploaded image from file upload field as well. Is there any way to achieve this.
I've found a way to remove all uploaded files but not a particular image.
Any kind of help is appreciated and if you need further information then feel free to ask.
javascript jquery html file multiple-file-upload
edited Nov 23 '18 at 3:07
Shiladitya
9,43692031
asked Nov 23 '18 at 2:46
Sagar GautamSagar Gautam
4,33931644
add a comment |
0
0
0
I've searched everywhere and still don't get what I want.
I've following input field.
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
I've made image preview and on a remove button click, image preview is removed. In this case, I want to remove uploaded image from file upload field as well. Is there any way to achieve this.
I've found a way to remove all uploaded files but not a particular image.
Any kind of help is appreciated and if you need further information then feel free to ask.
javascript jquery html file multiple-file-upload
edited Nov 23 '18 at 3:07
Shiladitya
9,43692031
asked Nov 23 '18 at 2:46
Sagar GautamSagar Gautam
4,33931644
I've searched everywhere and still don't get what I want.
I've following input field.
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
I've made image preview and on a remove button click, image preview is removed. In this case, I want to remove uploaded image from file upload field as well. Is there any way to achieve this.
I've found a way to remove all uploaded files but not a particular image.
Any kind of help is appreciated and if you need further information then feel free to ask.
javascript jquery html file multiple-file-upload
javascript jquery html file multiple-file-upload
edited Nov 23 '18 at 3:07
Shiladitya
9,43692031
asked Nov 23 '18 at 2:46
Sagar GautamSagar Gautam
4,33931644
edited Nov 23 '18 at 3:07
Shiladitya
9,43692031
asked Nov 23 '18 at 2:46
Sagar GautamSagar Gautam
4,33931644
edited Nov 23 '18 at 3:07
Shiladitya
9,43692031
edited Nov 23 '18 at 3:07
Shiladitya
9,43692031
edited Nov 23 '18 at 3:07
Shiladitya
9,43692031
9,43692031
asked Nov 23 '18 at 2:46
Sagar GautamSagar Gautam
4,33931644
asked Nov 23 '18 at 2:46
Sagar GautamSagar Gautam
4,33931644
asked Nov 23 '18 at 2:46
Sagar GautamSagar Gautam
4,33931644
4,33931644
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
I have a example delete image hope it will help you.
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var htmlImage = '<div>';
htmlImage = htmlImage + '<img src="'+event.target.result+'" />';
htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />';
htmlImage = htmlImage + '</div>';
$($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
function removeImage(item) {
//alert(item);
item.parent().remove();
}
$('#photo-gallery').on('change', function() {
imagesPreview(this, 'div.gallery');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
<div class="gallery"></div>
</div>
</div>answered Nov 23 '18 at 3:12
son phamson pham
27816
When I click delete button there is still file name on the side of browse button
– Sagar Gautam
Nov 23 '18 at 3:35
I think you should set image name is empty in event change. ("#photo-gallery").val('');
– son pham
Nov 23 '18 at 3:48
add a comment |
0
I wrote this code fast, hope it help
if it was what you need and you need help, I will do
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
$(this).val('');
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});body{
font-family:arial;
}
#result{
margin:4px 0;
}
.img-div{
position:relative;
display:block;
width:200px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
</body>answered Nov 23 '18 at 3:26
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
Thanks for your answer. I've already made the remove button to remove preview but when I submit the form removed images are still submitted. if you know such thing can be acheived then you are heartly welcome to give suggestions.
– Sagar Gautam
Nov 23 '18 at 3:38
in this example it will be deleted, just loop files in your form data not file input
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:40
let me write the full example and post it
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:41
Okay, take your time :D
– Sagar Gautam
Nov 23 '18 at 3:48
ok, see full example. I posted it here
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:59
add a comment |
0
this is the full example and I tested it and it works
sure you cant test upload here but try it in your local server
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
$(document).on('click','#submit',function(){
if(files.length===0){
return false;
}
var fd=new FormData();
for(var i=0;i<files.length;i++){
fd.append('img_'+i,files[i]);
}
$.ajax({
url:"upload-images.php",
method:"post",
cache:false,
dataType:'json',
processData:false,
contentType:false,
data: fd,
success: function(data){
console.log(data);
}
});
});.img-div{
position:relative;
display:block;
width:300px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>and in you upload-images.php
foreach($_FILES as $file){
//your code
}
answered Nov 23 '18 at 3:59
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440080%2fhow-to-remove-single-uploaded-file-from-jquery-in-multiple-file-upload%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I have a example delete image hope it will help you.
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var htmlImage = '<div>';
htmlImage = htmlImage + '<img src="'+event.target.result+'" />';
htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />';
htmlImage = htmlImage + '</div>';
$($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
function removeImage(item) {
//alert(item);
item.parent().remove();
}
$('#photo-gallery').on('change', function() {
imagesPreview(this, 'div.gallery');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
<div class="gallery"></div>
</div>
</div>answered Nov 23 '18 at 3:12
son phamson pham
27816
When I click delete button there is still file name on the side of browse button
– Sagar Gautam
Nov 23 '18 at 3:35
I think you should set image name is empty in event change. ("#photo-gallery").val('');
– son pham
Nov 23 '18 at 3:48
add a comment |
0
I have a example delete image hope it will help you.
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var htmlImage = '<div>';
htmlImage = htmlImage + '<img src="'+event.target.result+'" />';
htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />';
htmlImage = htmlImage + '</div>';
$($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
function removeImage(item) {
//alert(item);
item.parent().remove();
}
$('#photo-gallery').on('change', function() {
imagesPreview(this, 'div.gallery');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
<div class="gallery"></div>
</div>
</div>answered Nov 23 '18 at 3:12
son phamson pham
27816
When I click delete button there is still file name on the side of browse button
– Sagar Gautam
Nov 23 '18 at 3:35
I think you should set image name is empty in event change. ("#photo-gallery").val('');
– son pham
Nov 23 '18 at 3:48
add a comment |
0
0
0
I have a example delete image hope it will help you.
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var htmlImage = '<div>';
htmlImage = htmlImage + '<img src="'+event.target.result+'" />';
htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />';
htmlImage = htmlImage + '</div>';
$($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
function removeImage(item) {
//alert(item);
item.parent().remove();
}
$('#photo-gallery').on('change', function() {
imagesPreview(this, 'div.gallery');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
<div class="gallery"></div>
</div>
</div>answered Nov 23 '18 at 3:12
son phamson pham
27816
I have a example delete image hope it will help you.
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var htmlImage = '<div>';
htmlImage = htmlImage + '<img src="'+event.target.result+'" />';
htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />';
htmlImage = htmlImage + '</div>';
$($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
function removeImage(item) {
//alert(item);
item.parent().remove();
}
$('#photo-gallery').on('change', function() {
imagesPreview(this, 'div.gallery');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
<div class="gallery"></div>
</div>
</div> // Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var htmlImage = '<div>';
htmlImage = htmlImage + '<img src="'+event.target.result+'" />';
htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />';
htmlImage = htmlImage + '</div>';
$($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
function removeImage(item) {
//alert(item);
item.parent().remove();
}
$('#photo-gallery').on('change', function() {
imagesPreview(this, 'div.gallery');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
<div class="gallery"></div>
</div>
</div> // Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var htmlImage = '<div>';
htmlImage = htmlImage + '<img src="'+event.target.result+'" />';
htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />';
htmlImage = htmlImage + '</div>';
$($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
function removeImage(item) {
//alert(item);
item.parent().remove();
}
$('#photo-gallery').on('change', function() {
imagesPreview(this, 'div.gallery');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
<div class="gallery"></div>
</div>
</div>answered Nov 23 '18 at 3:12
son phamson pham
27816
answered Nov 23 '18 at 3:12
son phamson pham
27816
answered Nov 23 '18 at 3:12
son phamson pham
27816
answered Nov 23 '18 at 3:12
son phamson pham
27816
27816
When I click delete button there is still file name on the side of browse button
– Sagar Gautam
Nov 23 '18 at 3:35
I think you should set image name is empty in event change. ("#photo-gallery").val('');
– son pham
Nov 23 '18 at 3:48
add a comment |
When I click delete button there is still file name on the side of browse button
– Sagar Gautam
Nov 23 '18 at 3:35
I think you should set image name is empty in event change. ("#photo-gallery").val('');
– son pham
Nov 23 '18 at 3:48
When I click delete button there is still file name on the side of browse button
– Sagar Gautam
Nov 23 '18 at 3:35
When I click delete button there is still file name on the side of browse button
– Sagar Gautam
Nov 23 '18 at 3:35
I think you should set image name is empty in event change. ("#photo-gallery").val('');
– son pham
Nov 23 '18 at 3:48
I think you should set image name is empty in event change. ("#photo-gallery").val('');
– son pham
Nov 23 '18 at 3:48
add a comment |
0
I wrote this code fast, hope it help
if it was what you need and you need help, I will do
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
$(this).val('');
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});body{
font-family:arial;
}
#result{
margin:4px 0;
}
.img-div{
position:relative;
display:block;
width:200px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
</body>answered Nov 23 '18 at 3:26
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
Thanks for your answer. I've already made the remove button to remove preview but when I submit the form removed images are still submitted. if you know such thing can be acheived then you are heartly welcome to give suggestions.
– Sagar Gautam
Nov 23 '18 at 3:38
in this example it will be deleted, just loop files in your form data not file input
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:40
let me write the full example and post it
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:41
Okay, take your time :D
– Sagar Gautam
Nov 23 '18 at 3:48
ok, see full example. I posted it here
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:59
add a comment |
0
I wrote this code fast, hope it help
if it was what you need and you need help, I will do
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
$(this).val('');
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});body{
font-family:arial;
}
#result{
margin:4px 0;
}
.img-div{
position:relative;
display:block;
width:200px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
</body>answered Nov 23 '18 at 3:26
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
Thanks for your answer. I've already made the remove button to remove preview but when I submit the form removed images are still submitted. if you know such thing can be acheived then you are heartly welcome to give suggestions.
– Sagar Gautam
Nov 23 '18 at 3:38
in this example it will be deleted, just loop files in your form data not file input
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:40
let me write the full example and post it
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:41
Okay, take your time :D
– Sagar Gautam
Nov 23 '18 at 3:48
ok, see full example. I posted it here
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:59
add a comment |
0
0
0
I wrote this code fast, hope it help
if it was what you need and you need help, I will do
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
$(this).val('');
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});body{
font-family:arial;
}
#result{
margin:4px 0;
}
.img-div{
position:relative;
display:block;
width:200px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
</body>answered Nov 23 '18 at 3:26
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
I wrote this code fast, hope it help
if it was what you need and you need help, I will do
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
$(this).val('');
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});body{
font-family:arial;
}
#result{
margin:4px 0;
}
.img-div{
position:relative;
display:block;
width:200px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
</body>var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
$(this).val('');
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});body{
font-family:arial;
}
#result{
margin:4px 0;
}
.img-div{
position:relative;
display:block;
width:200px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
</body>var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
$(this).val('');
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});body{
font-family:arial;
}
#result{
margin:4px 0;
}
.img-div{
position:relative;
display:block;
width:200px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
</body>answered Nov 23 '18 at 3:26
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
answered Nov 23 '18 at 3:26
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
answered Nov 23 '18 at 3:26
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
answered Nov 23 '18 at 3:26
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
33216
Thanks for your answer. I've already made the remove button to remove preview but when I submit the form removed images are still submitted. if you know such thing can be acheived then you are heartly welcome to give suggestions.
– Sagar Gautam
Nov 23 '18 at 3:38
in this example it will be deleted, just loop files in your form data not file input
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:40
let me write the full example and post it
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:41
Okay, take your time :D
– Sagar Gautam
Nov 23 '18 at 3:48
ok, see full example. I posted it here
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:59
add a comment |
Thanks for your answer. I've already made the remove button to remove preview but when I submit the form removed images are still submitted. if you know such thing can be acheived then you are heartly welcome to give suggestions.
– Sagar Gautam
Nov 23 '18 at 3:38
in this example it will be deleted, just loop files in your form data not file input
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:40
let me write the full example and post it
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:41
Okay, take your time :D
– Sagar Gautam
Nov 23 '18 at 3:48
ok, see full example. I posted it here
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:59
Thanks for your answer. I've already made the remove button to remove preview but when I submit the form removed images are still submitted. if you know such thing can be acheived then you are heartly welcome to give suggestions.
– Sagar Gautam
Nov 23 '18 at 3:38
Thanks for your answer. I've already made the remove button to remove preview but when I submit the form removed images are still submitted. if you know such thing can be acheived then you are heartly welcome to give suggestions.
– Sagar Gautam
Nov 23 '18 at 3:38
in this example it will be deleted, just loop files in your form data not file input
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:40
in this example it will be deleted, just loop files in your form data not file input
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:40
let me write the full example and post it
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:41
let me write the full example and post it
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:41
Okay, take your time :D
– Sagar Gautam
Nov 23 '18 at 3:48
Okay, take your time :D
– Sagar Gautam
Nov 23 '18 at 3:48
ok, see full example. I posted it here
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:59
ok, see full example. I posted it here
– Abdulsattar Alkhalaf
Nov 23 '18 at 3:59
add a comment |
0
this is the full example and I tested it and it works
sure you cant test upload here but try it in your local server
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
$(document).on('click','#submit',function(){
if(files.length===0){
return false;
}
var fd=new FormData();
for(var i=0;i<files.length;i++){
fd.append('img_'+i,files[i]);
}
$.ajax({
url:"upload-images.php",
method:"post",
cache:false,
dataType:'json',
processData:false,
contentType:false,
data: fd,
success: function(data){
console.log(data);
}
});
});.img-div{
position:relative;
display:block;
width:300px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>and in you upload-images.php
foreach($_FILES as $file){
//your code
}
answered Nov 23 '18 at 3:59
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
add a comment |
0
this is the full example and I tested it and it works
sure you cant test upload here but try it in your local server
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
$(document).on('click','#submit',function(){
if(files.length===0){
return false;
}
var fd=new FormData();
for(var i=0;i<files.length;i++){
fd.append('img_'+i,files[i]);
}
$.ajax({
url:"upload-images.php",
method:"post",
cache:false,
dataType:'json',
processData:false,
contentType:false,
data: fd,
success: function(data){
console.log(data);
}
});
});.img-div{
position:relative;
display:block;
width:300px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>and in you upload-images.php
foreach($_FILES as $file){
//your code
}
answered Nov 23 '18 at 3:59
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
add a comment |
0
0
0
this is the full example and I tested it and it works
sure you cant test upload here but try it in your local server
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
$(document).on('click','#submit',function(){
if(files.length===0){
return false;
}
var fd=new FormData();
for(var i=0;i<files.length;i++){
fd.append('img_'+i,files[i]);
}
$.ajax({
url:"upload-images.php",
method:"post",
cache:false,
dataType:'json',
processData:false,
contentType:false,
data: fd,
success: function(data){
console.log(data);
}
});
});.img-div{
position:relative;
display:block;
width:300px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>and in you upload-images.php
foreach($_FILES as $file){
//your code
}
answered Nov 23 '18 at 3:59
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
this is the full example and I tested it and it works
sure you cant test upload here but try it in your local server
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
$(document).on('click','#submit',function(){
if(files.length===0){
return false;
}
var fd=new FormData();
for(var i=0;i<files.length;i++){
fd.append('img_'+i,files[i]);
}
$.ajax({
url:"upload-images.php",
method:"post",
cache:false,
dataType:'json',
processData:false,
contentType:false,
data: fd,
success: function(data){
console.log(data);
}
});
});.img-div{
position:relative;
display:block;
width:300px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>and in you upload-images.php
foreach($_FILES as $file){
//your code
}
var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
$(document).on('click','#submit',function(){
if(files.length===0){
return false;
}
var fd=new FormData();
for(var i=0;i<files.length;i++){
fd.append('img_'+i,files[i]);
}
$.ajax({
url:"upload-images.php",
method:"post",
cache:false,
dataType:'json',
processData:false,
contentType:false,
data: fd,
success: function(data){
console.log(data);
}
});
});.img-div{
position:relative;
display:block;
width:300px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>var files=;
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
$(document).on('click','#submit',function(){
if(files.length===0){
return false;
}
var fd=new FormData();
for(var i=0;i<files.length;i++){
fd.append('img_'+i,files[i]);
}
$.ajax({
url:"upload-images.php",
method:"post",
cache:false,
dataType:'json',
processData:false,
contentType:false,
data: fd,
success: function(data){
console.log(data);
}
});
});.img-div{
position:relative;
display:block;
width:300px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>answered Nov 23 '18 at 3:59
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
answered Nov 23 '18 at 3:59
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
answered Nov 23 '18 at 3:59
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
answered Nov 23 '18 at 3:59
Abdulsattar AlkhalafAbdulsattar Alkhalaf
33216
33216
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440080%2fhow-to-remove-single-uploaded-file-from-jquery-in-multiple-file-upload%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
