I use this code below to upload images. The code itself is working fine. The user can select multiple image at once or just one by one. The code shows the selected image files with preview of the image before upload.
Is there an option to remove a selected file (image) before the upload? To add a “remove” button under the thumbnails?
<h3>Add images</h3>
<input type="file" id="files" name="file[]" multiple />
<output id="list"></output>
<button type="submit" name="upload">Save</button>
<script>
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img style="width:300px; border-width:3px; border-style:solid; border-color:#000; margin:8px;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>