Click here to Skip to main content
12,395,593 members (60,517 online)
Rate this:
Please Sign up or sign in to vote.
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 is my code...
function uploadFile(fileuploadobj){

 var fileParentDivobj = $(Divfileuploadobj).closest(".ChildUploadDiv");
 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 /;
                         //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';
                                    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(".ImgDiv").find("span").html(percentComplete + '%');
//				            // File load event
				            xhr.upload.addEventListener("load", loadSuccess, false);
				            function loadSuccess(evt) {
                            	// Parse json.
				             //  alert("Load");

                            //handle actual servr response

                             xhr.onreadystatechange = stateChange;
                             // Show upload complete or upload failed depending on result
                                    function stateChange(event) {
                                        if ( == 4) {
                                            if ( == 200 || == 304) {
                                             //change the text of progress bar to 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()
                                function uploadFailed(evt) {
                                    alert("There was an error attempting to upload the file.");
                                function uploadCanceled(evt) {
                                        alert("The upload has been canceled by the user or the browser dropped the connection.");

				  "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)
                           return xhr ;
				        } //my fun myfileupload()

//on every file selection
 $(".CancelUpload").live("click",(function () {
 //it can abort current ifle upload
 });    //  $("input[type=file]") End
Posted 20-Dec-11 19:39pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

I solve works..need to call abort method on current cancel button on which we have to abort the file upload..
//These function i want to call on every cance button instance

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.160721.1 | Last Updated 23 Dec 2011
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100