javascript - How to cancelabort jQuery AJAX file upload

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 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>

Share Improve this question asked Apr 2, 2018 at 12:30 acmsohail 1,02313 silver badges35 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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745167599a4614726.html

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

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

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

1 Answer 1

相关推荐