Abort file upload on click of cancel button in html5

See more:

C#

HTML5

MVC3

i want to abort particular file on click of cancel button...but it will abort on first button instance not for cancel button for that file upload...i want to apply closure for this situation which will abort only those file which cancel button is click...here is my code...

function uploadFile(fileuploadobj){


 var fileParentDivobj = $(Divfileuploadobj).closest(".ChildUploadDiv");
                         
 myfileupload(fileuploadobj.files[0]);

 function myfileupload(file) {


  

                           
                        /************** Added Previous Functionality *******************************/
                              // Uploading - for Firefox, Google Chrome and Safari
				            xhr = new XMLHttpRequest();


				            // Update progress bar
				            xhr.upload.addEventListener("progress", uploadProgress, false);

				            function uploadProgress(evt) {

				                if (evt.lengthComputable) {
				                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
				                  
                         //added now for showing how much file is sending
                                    bytesUploaded = evt.loaded;
                                    var bytesTransfered = '';
                                    if (bytesUploaded > 1024*1024)bytesTransfered = 

                                    (Math.round(bytesUploaded * 100/(1024*1024))/100).toString() + 'MB';else if (bytesUploaded > 1024)

                                    bytesTransfered = (Math.round(bytesUploaded * 100/1024)/100).toString() + 'KB';
                                    else
                                    bytesTransfered = (Math.round(bytesUploaded * 100)/100).toString() + 'Bytes';

                                    $(fileParentDivobj).find(".DataSending").html(bytesTransfered + " of "+ fileSize);
                                    //for my progrss bar

                                    //for my progrss bar

                                     $(fileParentDivobj).find("progress").attr('value',evt.loaded);
                                     $(fileParentDivobj).find("progress").attr('max',evt.total);
                                     $(fileParentDivobj).find(".ImgDiv").find("span").html(percentComplete + '%');
				                }
				            }

//				            // File load event
				            xhr.upload.addEventListener("load", loadSuccess, false);

				            function loadSuccess(evt) {
                            	// Parse json.
                               
	      
                              $(fileParentDivobj).find(".ImgDiv").find("span").html('Saving...');
                                alert(evt.target.responseText);
				             //  alert("Load");
                                }



                            //handle actual servr response

                             xhr.onreadystatechange = stateChange;
                             // Show upload complete or upload failed depending on result
                                    function stateChange(event) {
                                        if (event.target.readyState == 4) {
                                            if (event.target.status == 200 || event.target.status == 304) {
                                             
                                             //change the text of progress bar to uploaded
                                             $(fileParentDivobj).find(".ImgDiv").find("span").html("uploaded");
                                              //Add the Delete Button
                                             $(fileParentDivobj).find(".CDivDeletButtom").find("form").append("<button class='BtnDeleteUpload'>Delete</button>");        
                            
                                            }

                                        }
                                    }

//                                //handling error


                                xhr.addEventListener("error", uploadFailed, false);
                            
                                xhr.addEventListener("abort", uploadCanceled, false);

//These function i want to call on every cance button instance
           function cancel()
           {
            xhr.abort();
           }

                                function uploadFailed(evt) {
                                    alert("There was an error attempting to upload the file.");
                                     $(fileParentDivobj).find(".ImgDiv").find("span").html('FAILED');
                                    }

                                function uploadCanceled(evt) {
                                        alert("The upload has been canceled by the user or the browser dropped the connection.");
                                    }


				            xhr.open("POST", "@Url.Action("Upload","Home")", true);

				            // Set appropriate headers
				            xhr.setRequestHeader("Cache-Control", "no-cache");
				            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				            xhr.setRequestHeader("Content-Type", "multipart/form-data");
				            xhr.setRequestHeader("X-File-Name", file.fileName);
				           // xhr.setRequestHeader("X-File-Size", file.fileSize);
				            xhr.setRequestHeader("X-File-Type", file.type);
                           xhr.setRequestHeader("X-File", file);
				            // Send the file (doh)
				            xhr.send(file);
                           return xhr ;

				        } //my fun myfileupload()

				    }
    
//on every file selection
   $("input[type=file]").live("change",function(){
  
 $(".CancelUpload").live("click",(function () {
 //it can abort current ifle upload
 uploadFile(this).cancel();
 }));
                           
 });    //  $("input[type=file]") End