javascript - How to cancelabort jQuery AJAX file upload - Stack Overflow

admin管理员组

文章数量:1415491

I'm using Ajax file upload function with the status bar in a modal. The code is working fine. But when the user clicks the cancel button (while uploading) the modal is close but the file is getting the upload to the server in the background.

I tried xhr.abort(); function to cancel the upload. But it's not working. How to stop the file upload process when a user clicks the cancel button.

I'm using jquery 1.10.2 version.

$(function () {
        $('#showonlyvalue-portvid').hide();
        $('#btnuploadvideo').click(function () {
            if (jQuery("#verifyvideo-file").valid()) {
                $('.myprogress').css('width', '0');
                $('.successmsgfile-video').text('');
                var formData = new FormData();
                formData.append('portfoliovideos', $('input[name=portfoliovideos]')[0].files[0]);
                $('#showonlyvalue-portvid').show();
                $('#btnuploadvideo').attr('disabled', 'disabled');
                $('.successmsgfile-video').text('Uploading in progress...');
                $.ajax({
                    url: "<?php echo base_url(); ?>profile/port_videoone"
                    , data: formData
                    , processData: false
                    , contentType: false
                    , type: 'POST' // this part is progress bar
                    , xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete * 100);
                                $('.myprogress').text(percentComplete + '%');
                                $('.myprogress').css('width', percentComplete + '%');
                            }
                        }, false);
                        return xhr;
                    }
                    , success: function (data) {
                        console.log(data);
                        $('#upload-video-file').modal('hide');
                        swal("Success!", "Video has been uploaded!", "success");
                        $('#showonlyvalue-portvid').hide();
                        $('.myprogress').css('width', '0');
                        $('.successmsgfile-video').text('');
                        $('#btnuploadvideo').prop('disabled', false);
                        $('input.form-control').val('');
                        $("#verifyvideo-file")[0].reset();
                    }
                });
            }
        });
    });
$(document).on('click','.stopvideo', function(e){
    xhr.abort();
    xhr = null;
    console.log("Canceled");
});


<div id="upload-video-file" class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <form id="verifyvideo-file" method="post" class="padbtm20">
                    <div class="form-group width100 hirehide nomargin dispinline">
                        <input type="file" id="portvideoname" name="portfoliovideos" accept="video/mp4,video/x-m4v,video/ogv,video/webm,video/quicktime" required>
                    </div>
                    <div class="form-group" id="showonlyvalue-portvid">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                        </div>
                        <div class="successmsgfile-video"></div>
                    </div>
                    <div class="form-group margin18 dispinline">
                        <input type="button" id="btnuploadvideo" class="btn btn-primary" value="Upload" />
                        <button type="button" class="btn btn-default stopvideo">Cancel</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

I'm using Ajax file upload function with the status bar in a modal. The code is working fine. But when the user clicks the cancel button (while uploading) the modal is close but the file is getting the upload to the server in the background.

I tried xhr.abort(); function to cancel the upload. But it's not working. How to stop the file upload process when a user clicks the cancel button.

I'm using jquery 1.10.2 version.

$(function () {
        $('#showonlyvalue-portvid').hide();
        $('#btnuploadvideo').click(function () {
            if (jQuery("#verifyvideo-file").valid()) {
                $('.myprogress').css('width', '0');
                $('.successmsgfile-video').text('');
                var formData = new FormData();
                formData.append('portfoliovideos', $('input[name=portfoliovideos]')[0].files[0]);
                $('#showonlyvalue-portvid').show();
                $('#btnuploadvideo').attr('disabled', 'disabled');
                $('.successmsgfile-video').text('Uploading in progress...');
                $.ajax({
                    url: "<?php echo base_url(); ?>profile/port_videoone"
                    , data: formData
                    , processData: false
                    , contentType: false
                    , type: 'POST' // this part is progress bar
                    , xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete * 100);
                                $('.myprogress').text(percentComplete + '%');
                                $('.myprogress').css('width', percentComplete + '%');
                            }
                        }, false);
                        return xhr;
                    }
                    , success: function (data) {
                        console.log(data);
                        $('#upload-video-file').modal('hide');
                        swal("Success!", "Video has been uploaded!", "success");
                        $('#showonlyvalue-portvid').hide();
                        $('.myprogress').css('width', '0');
                        $('.successmsgfile-video').text('');
                        $('#btnuploadvideo').prop('disabled', false);
                        $('input.form-control').val('');
                        $("#verifyvideo-file")[0].reset();
                    }
                });
            }
        });
    });
$(document).on('click','.stopvideo', function(e){
    xhr.abort();
    xhr = null;
    console.log("Canceled");
});


<div id="upload-video-file" class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <form id="verifyvideo-file" method="post" class="padbtm20">
                    <div class="form-group width100 hirehide nomargin dispinline">
                        <input type="file" id="portvideoname" name="portfoliovideos" accept="video/mp4,video/x-m4v,video/ogv,video/webm,video/quicktime" required>
                    </div>
                    <div class="form-group" id="showonlyvalue-portvid">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                        </div>
                        <div class="successmsgfile-video"></div>
                    </div>
                    <div class="form-group margin18 dispinline">
                        <input type="button" id="btnuploadvideo" class="btn btn-primary" value="Upload" />
                        <button type="button" class="btn btn-default stopvideo">Cancel</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

• javascript
• jquery
• ajax
• file-upload
• jquery-file-upload

Share Improve this question Follow asked Apr 2, 2018 at 12:30 acmsohailacmsohail 1,0231313 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try a global variable and call .abort() on it:

var ajaxCall;

$(function () {
        $('#showonlyvalue-portvid').hide();
        $('#btnuploadvideo').click(function () {
            if (jQuery("#verifyvideo-file").valid()) {
                $('.myprogress').css('width', '0');
                $('.successmsgfile-video').text('');
                var formData = new FormData();
                formData.append('portfoliovideos', $('input[name=portfoliovideos]')[0].files[0]);
                $('#showonlyvalue-portvid').show();
                $('#btnuploadvideo').attr('disabled', 'disabled');
                $('.successmsgfile-video').text('Uploading in progress...');
                ajaxCall = $.ajax({
                    url: "<?php echo base_url(); ?>profile/port_videoone"
                    , data: formData
                    , processData: false
                    , contentType: false
                    , type: 'POST' // this part is progress bar
                    , xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete * 100);
                                $('.myprogress').text(percentComplete + '%');
                                $('.myprogress').css('width', percentComplete + '%');
                            }
                        }, false);
                        return xhr;
                    }
                    , success: function (data) {
                        console.log(data);
                        $('#upload-video-file').modal('hide');
                        swal("Success!", "Video has been uploaded!", "success");
                        $('#showonlyvalue-portvid').hide();
                        $('.myprogress').css('width', '0');
                        $('.successmsgfile-video').text('');
                        $('#btnuploadvideo').prop('disabled', false);
                        $('input.form-control').val('');
                        $("#verifyvideo-file")[0].reset();
                    }
                });
            }
        });
    });
$(document).on('click','.stopvideo', function(e){
    ajaxCall.abort();
    console.log("Canceled");
});


<div id="upload-video-file" class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <form id="verifyvideo-file" method="post" class="padbtm20">
                    <div class="form-group width100 hirehide nomargin dispinline">
                        <input type="file" id="portvideoname" name="portfoliovideos" accept="video/mp4,video/x-m4v,video/ogv,video/webm,video/quicktime" required>
                    </div>
                    <div class="form-group" id="showonlyvalue-portvid">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                        </div>
                        <div class="successmsgfile-video"></div>
                    </div>
                    <div class="form-group margin18 dispinline">
                        <input type="button" id="btnuploadvideo" class="btn btn-primary" value="Upload" />
                        <button type="button" class="btn btn-default stopvideo">Cancel</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

let me know

本文标签： javascriptHow to cancelabort jQuery AJAX file uploadStack Overflow