Plupload从UI删除上传的文件

Question

Am trying to delete the uploaded files from the screen once it got uploaded

I am using plupload v1.5.2

Below is the html of uploaded screen

<div class="plupload_wrapper">
    <a href="#" class="plupload_button plupload_add" style="z-index: 1; position: relative; display: block;" id="request98900-instance_attachments_browse">Select file</a>
    <span class="selected_file_info">
    <span id="fileId-0">
    <a style="clear:left" class="item ui-corner-all" href="#" title="">
        <span id="fileId-0" class="ui-icon ui-icon-close plupload_file_action plupload_delete"></span><span class="value plupload_file_name">L98BIv2_10_inv_1good6bad.txt</span>
    </a><a class="item ui-corner-all" href="#"><span class="value noicon plupload_file_size">3 KB</span></a><a class="item progress ui-corner-all" href="#" style="display:none"><span class="value noicon plupload_file_status">Uploading ...</span></a>
    </span>
    <input type="hidden" class="MultiField" name="multiField_870" value="{&quot;name&quot;:&quot;L98BIv2_10_inv_1good6bad.txt&quot;,&quot;size&quot;:3204,&quot;contentType&quot;:&quot;text/plain&quot;,&quot;id&quot;:&quot;870&quot;}">
    <input type="hidden" class="MultiField" name="multiFieldType" value="FileData"><span id="fileId-1">

    <a style="clear:left" class="item ui-corner-all" href="#" title=""><span id="fileId-1" class="ui-icon ui-icon-close plupload_file_action plupload_delete"></span><span class="value plupload_file_name">L98BIv2_10_inv_1good6bad_2_lines.txt</span>
    </a><a class="item ui-corner-all" href="#"><span class="value noicon plupload_file_size">2 KB</span></a><a class="item progress ui-corner-all" href="#" style="display:none"><span class="value noicon plupload_file_status">Uploading ...</span></a>
    </span>
    <input type="hidden" class="MultiField" name="multiField_871" value="{&quot;name&quot;:&quot;L98BIv2_10_inv_1good6bad_2_lines.txt&quot;,&quot;size&quot;:1580,&quot;contentType&quot;:&quot;text/plain&quot;,&quot;id&quot;:&quot;871&quot;}">
    <input type="hidden" class="MultiField" name="multiFieldType" value="FileData"><span id="fileId-2">

    <a style="clear:left" class="item ui-corner-all" href="#" title=""><span id="fileId-2" class="ui-icon ui-icon-close plupload_file_action plupload_delete"></span><span class="value plupload_file_name">L98BIv2_10_inv_1good6bad_multilines.txt</span>
    </a><a class="item ui-corner-all" href="#"><span class="value noicon plupload_file_size">4 KB</span></a><a class="item progress ui-corner-all" href="#" style="display:none"><span class="value noicon plupload_file_status">Uploading ...</span></a>
    </span>
    <input type="hidden" name="multiOperation" value="multiFile">
    <input type="hidden" class="MultiField" name="multiField_872" value="{&quot;name&quot;:&quot;L98BIv2_10_inv_1good6bad_multilines.txt&quot;,&quot;size&quot;:4183,&quot;contentType&quot;:&quot;text/plain&quot;,&quot;id&quot;:&quot;872&quot;}">
    <input type="hidden" class="MultiField" name="multiFieldType" value="FileData">
    </span>
    <input type="hidden" id="request98900-instance_attachments_count" name="request98900-instance_attachments_count" value="0">
</div>

below is the jQuery which handles the delete

var jsonData = $('#jsonData').val();
var fileJson = jQuery.parseJSON(jsonData);
                var i = 0;
                var files = new Array();
                $.each(fileJson, function(key,value) {
                console.log("multiFileJSON ----------------------------> name = "+value["name"]+" id = "+ value["id"]+" size = "+ parseInt(value["size"])+" contentType = "+value["contentType"]);
                var fileName = value["name"];
                var fileSize = value["size"];
                var fileDataId = value["id"];
                var contentType = value["contentType"];
                var fileHref = null;
                var f = new plupload.File(fileName, fileSize);
                f.status = plupload.DONE;
                f.percent = 100;
                f.type = contentType;
                f.id = fileDataId;
                files.push(f);
                });
$('.plupload_file_action', target).click(function(e) {
                    $('.selected_file_info input[type=hidden]', target).val('');
                    console.log("fileObjects ----------------------------> files = "+files);
                    uploader.files = files;
                    var fid = $(this).attr("id")
                    fid = fid.replace("fileId-","");
                    if($.isNumeric(fid)) {
                        console.log("uploader.files[0].name = "+uploader.files[0].name+" uploader.files[0].size = "+uploader.files[0].size);
                        /*uploader.removeFile(files[parseInt(fid)]);*/ uploader.splice(files[parseInt(fid)], 1);
                    }
                    showMultiAddButton();
                    $('form, .plupload', target).css('top','0px');
                    $('form, .plupload', target).css('left','0px');
                    e.preventDefault();

                    /*$('.selected_file_info a', target).remove();
                    $(target).parent().find('.preview-image').remove();*/
                    showMultiAddButton();
                    e.preventDefault();
                }); 

jsonData comes from the server and its data is as below

[{"size":"3204","name":"L98BIv2_10_inv_1good6bad.txt","id":"870","contentType":"text\/plain"},
{"size":"1580","name":"L98BIv2_10_inv_1good6bad_2_lines.txt","id":"871","contentType":"text\/plain"},
{"size":"4183","name":"L98BIv2_10_inv_1good6bad_multilines.txt","id":"872","contentType":"text\/plain"}] 

I've tried both uploader.removeFile() and uploader.splice() but none of them seems to be working.

Could someone please help me with this?

Answer 1

With pure JavaScript files on storage cannot be deleted. Using an AJAX call (which sends the jsonData) to a server side script (like PHP) that deletes the files will work

Answer 2

// FILE NAME : jquery.ui.plupload.js
// USE up.splice();

uploader.bind('FileUploaded', function(up, file, result) {

    self._handleFileStatus(file);
    self._trigger('uploaded', null, { up: up, file: file, result: result } );

    var respond=JSON.parse(result.response) ;

    if(respond.success==0){

        file.status = plupload.FAILED;
        up.trigger('UploadProgress', file);
        var imageError=true;
    }
    else{

        file.status = plupload.DONE;
        var imageError=false;
    }   

    if(this.total.queued == 0) {

        $("#message").text('All File uploaded successfully');
        setTimeout(function(){ 
        up.splice();
            $("#message").text('');
        }, 3000);

    }
});