Say I have a form that allows users to upload multiple images, which are appended with an option to remove them if they don't want to upload that particular photo.
Is it possible to remove the value from the files object of the one that they removed (e.g. didn't want to upload)?
Say I have a form that allows users to upload multiple images, which are appended with an option to remove them if they don't want to upload that particular photo.
Is it possible to remove the value from the files object of the one that they removed (e.g. didn't want to upload)?
Share Improve this question asked Feb 18, 2012 at 1:46 bob_cobbbob_cobb 2,26911 gold badges52 silver badges115 bronze badges 2-
Did you try to remove
<input type='file'>? If, of course, your form consists of a set of the standard file inputs. – Cheery Commented Feb 18, 2012 at 4:13 - Possible duplicate of How to remove one specific selected file from input file control – Endless Commented Dec 9, 2017 at 12:57
3 Answers
Reset to default 5FileList has no API to remove entries:
https://developer.mozilla/en/DOM/FileList
However you can reconstruct File uploader using XHR2 and AJAX and filter in content there.
This implies doing XHR2 and AJAX upload and is not suitable for traditional <form> uploads.
https://developer.mozilla/en/Using_files_from_web_applications
If you are using a standard form with a set of standard file inputs then you can do it like this http://jsfiddle/thXre/
$(document).ready(function(){
$('.remove').click(function(){
$(this).closest('div').slideUp('slow', function(){$(this).remove();});
});
});
and html code:
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
Libraries are your best bet before we get some standard API...
FineUploader. Demo. Has file delete, image preview, file rename.
bluimp's jQuery File Upload Plugin. Demo. Has file delete, image preview, individual file upload, upload undo.
They are also available at https://cdnjs./