ajaxSubmit如何取消上传文件

最新推荐文章于 2024-01-26 09:19:22 发布

抗压的人i

最新推荐文章于 2024-01-26 09:19:22 发布

阅读量1k

点赞数

分类专栏：前端文章标签： ajaxSubmit

本文链接：https://blog.youkuaiyun.com/qq_39565575/article/details/90257178

版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在上传过程中取消ajaxSubmit文件上传的方法，通过绑定取消事件并调用abort()方法实现，适用于需兼容IE8的项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需要用到ajaxSubmit上传文件，但是有个需求是在上传的过程中，可以点击取消来让上传停止，作为一个前端的新手，我就各种百度，然后嘞，还真没找到答案。

很多人用的都是formData，但是我的项目是需要兼容到IE8，所以只能用ajaxSubmit跟那个局部不局部刷新没啥卵关系。

然后就分享一下如何取消任务。

   //ajax异步上传文件
    function ajaxSub(){
        if(requestFlag){
            requestFlag = false;
            $(this).ajaxSubmit({
                type: "POST",
                url: submitFormInterAddr,
                contentType: false,
                processData: false,
                xhr:function(){
                    if(onprogress && xhr.upload) {
                        // console.log(xhr.upload,'-----------------');
                        xhr.upload.addEventListener("progress" , onprogress, false);
                        return xhr;
                    } },
                success : function(data){
                    hideProgress();
                    successDisUploadFile();
                    requestFlag = true;
                    console.log(data);
                },
                error : function(){
                    hideProgress();
                    failedDisUploadFile();
                    requestFlag = true;
                }
            })
            var jqxhr = $(this).data('jqxhr');
            // 绑定取消文件上传的事件
            removeUploadFile.bind('click', function(){
                jqxhr.abort();
            });
            return false; 
            //提交完成后重置表单
            // $(this).resetForm();
        }else{
            return;
        }
    }

网上很多关于formData 的取消上传是$.POST、$.GET等等，它返回值是个XMLHttpRequest所以可以使用abort()方法来中止当前的ajax请求，但是ajaxSubmit返回的是一个JQ对象，如果想获取它的XMLHttpRequest，这行代码就很关键 var jqxhr = $(this).data(‘jqxhr’);，这样就可以获取当前的ajax请求的XMLHttpRequest使用它的abort()方法来中止ajax请求。

对于新手来说，这个问题确实很难受，在这里第一时间分享给大家。
蟹蟹~~~~