Im display all the files in a div which is coming in an array upfiles
. Using each in jquery displaying all the files with delete button, when i click on the delete button that respective file details should be deleted from an array.
Here is the jquery code each loop which im tring to delete file details from array
var int_loop = 1;
var display_removebutton="";
$(upfiles).each(function(index, file)
{
if(total_size > 1000) // size limit comparision
display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' id='remove_"+int_loop+"' src='images/DeleteRed.png' />"
size = Math.round( file.size / 1024 );
if(size > 1000)
{
if(size > 1024)
size_display = Math.round(size / 1024 * 100)/100 + ' mb';
else
size_display = size + ' kb';
alert(file.name+"("+size+")"+" will be removed atomatically from list. As it exceeds limit.");
}
if(size > 1024)
size_display = Math.round(size / 1024 * 100)/100 + ' mb'; // converted to mb
else
size_display = size + ' kb';
$('#total').append("<div id='div_selec"+int_loop+"'><b>File Name :</b> "+file.name + "<b> Size:</b>" + size_display + display_removebutton + "</div>" );
$("#remove_"+int_loop).click(function() {
var curr_id = this.id;
var id = curr_id.substr(7);
alert(id+'file name '+file.name);
$("#div_selec"+id).empty();
upfiles.splice(index, 1) //updated as the suggested in comment
// delete upfiles[id];
alert(upfiles.length);
});
int_loop++;
});
Edited 1:
Actually im implementing drag and drop file upload in jquery php. In validation if total size of all files is greater than 1000kb im displaying delete button, which user has to delete some of the files
Edited 2 :
Im getting this error in console log : TypeError: upfiles.splice is not a function
Edited 3 :
upfiles is coming from this jquery drop event:
$( '#total' ).bind( 'drop',function(event) {
event.stopPropagation();
event.preventDefault();
if( upfiles == 0 )
{
upfiles = event.originalEvent.dataTransfer.files;
console.log(upfiles); // in this console log it is displaying `FileList [File, File, File, File, File, File, File]` File is nothing but the files which i have dropped in a div
}
else {
if(confirm( "Drop: Do you want to clear files selected already?" ) == true) {
upfiles = event.originalEvent.dataTransfer.files;
$( '#fileToUpload' ).val('');
}
else
return;
}
$( "#fileToUpload" ).trigger( 'change' );
});
splice
is not defined because upfiles
is of type FileList
and the prototype of FileList
doesn't define it. However you can convert any array-like object to an array using var array = Array.prototype.slice.call(arrayLikeObject, 0)
. Now array
has splice
and all other array methods. See http://jsfiddle.net/8e2s7/1/ for a short example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With