单击html5中的“取消"按钮可中止文件上传 [英] Abort file upload on click of cancel button in html5

问题描述

我想在单击取消"按钮时中止特定文件...但是它将在第一个按钮实例上中止，而不是为该文件上传的取消"按钮...我想在这种情况下应用关闭操作，这只会中止那些文件单击哪个取消按钮...这是我的代码...

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

推荐答案

(Divfileuploadobj).closest(.ChildUploadDiv"); myfileupload(fileuploadobj.files [0]); 函数myfileupload(file){ /**************添加了以前的功能***********************************/ //上传-适用于Firefox，Google Chrome和Safari xhr =新的XMLHttpRequest(); //更新进度条 xhr.upload.addEventListener("progress"，uploadProgress，false); 函数uploadProgress(evt){ 如果(evt.lengthComputable){ var percentComplete = Math.round(evt.loaded * 100/evt.total); //现在添加以显示正在发送多少文件 bytesUploaded = evt.loaded; var bytesTransfered =''''; 如果(bytesUploaded> 1024 * 1024)bytesTransfered = (Math.round(bytesUploaded * 100/(1024 * 1024))/100).toString()+``MB'';否则如果(bytesUploaded> 1024) bytesTransfered =(Math.round(bytesUploaded * 100/1024)/100).toString()+``KB''; 别的 bytesTransfered =(Math.round(bytesUploaded * 100)/100).toString()+``Bytes'';

(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); //对于我的进度栏 //对于我的进度条

(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(''value'',evt.loaded);

这篇关于单击html5中的“取消"按钮可中止文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！