Removable File Upload 1.0
Created Monday 27th of September 2010 by Andreas Lagerkvist
Copyright © 2010 Andreas Lagerkvist (andreaslagerkvist.com)
What it Does
This plug-in adds a "remove"-link next to input[type=file]:s that allows the user to remove a selected file from the input.
How to Use
jQuery('#file-uploader input[type=file]').removableFileUpload(); would make the input with type=file in the #file-uploader element removable.
Example
Example Code
HTML
<div id="jquery-removable-file-upload-example">
<input type="file" name="foo"/>
</div>
JS
$('#jquery-removable-file-upload-example input[type=file]').removableFileUpload();
Source Code
jQuery.fn.removableFileUpload = function (conf) {
var config = jQuery.extend({
remove: 'remove'
}, conf);
return this.each(function () {
var input = $(this);
var remove = $('<span class="jquery-removable-file-upload"><strong></strong> [<a href="#">' + config.remove + '</a>]</span>').insertAfter(input).hide();
var onchange = function () {
var file = input.val();
file = file.substring(file.lastIndexOf('\\') + 1);
if (file) {
remove.show().find('strong').text(file);
}
else {
remove.hide();
}
};
input.change(onchange);
remove.find('a').click(function () {
remove.hide();
input = $('<input type="file" name="' + input.attr('name') + '"/>').replaceAll(input).change(onchange);
return false;
});
});
};