Image upload preview remove option

JavaScript
1

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>
2

Actually, you can’t select them one by one – the new selection will replace the old file list, only the thumbnails will stay on the page. I think your best bet would be to append a new file input after one file was selected, which you could then simply remove again when the corresponding button gets clicked; eventually only the files actually present in the form will get sent to the server.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.