Delete uploaded image using ajax uploader

Question

I used ajax loader to uplaods files to server.It works fine but now i want to set delete option with each image and can delete that image before saving.My current images look like :

I am using this file uploader script for file uploading.Link

My Code for files upload is :

jQuery("#fileuploader").uploadFile({
    url:"<?php echo $this->getUrl('pmembers/priority/productimages/') ?>",
    multiple:true,
    fileName:"myfile",
    onSuccess: function (files, response, xhr,pd) { 
      var dir = '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."mkd/uploads/".Mage::getSingleton("customer/session")->getId()."/"; ?>';

        jQuery('#files').append('<li style="width:60px; float:left;margin-left:5px; margin-right:5px;"><img width="60" height="60" src="'+dir+files+'" /></li><img src="cross.png" />');


       },
    });
});

Answer 1

Try: Event when click remove button will send a request to server unlink (path: "dir+files"), after complete server will return client a notify.

jQuery:

var removeButton = $("li > img:last");
removeButton.click(function(){
    if (removeButton.attr('handling') != "true") {
        removeButton.attr('handling', 'true');
        var path = removeButton.prev('img[src]').attr('src');
        $.ajax({
            type: "POST",
            dataType: "json",
            url: (url),
            data: {'path': path},
            error: function () {
                //. Action when error.
            },
            success: function (data) {
                //. Action when success.
            }
        }).done(function(){
            removeButton.attr('handling', 'false');
        });
    }
});

PHP:

$path = $_POST['path'];
$unlink = unlink($path);
if (!$unlink) {
    print json_encode(array("return" => false)); exit();
}else {
    print json_encode(array("return" => true)); exit();
}