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
//These function i want to call on every cance button instance $(this).find(".CancelButtonClass").click(function() { xhr.abort(); });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)