如何cancel/abortjQueryAJAX上传文件
How to cancel/abort jQuery AJAX file upload
我在模态状态栏中使用 Ajax 文件上传功能。代码工作正常。但是当用户单击取消按钮(上传时)时,模式关闭但文件正在后台上传到服务器。
我试过xhr.abort();
取消上传的功能。但它不起作用。如何在用户单击取消按钮时停止文件上传过程。
我正在使用 jquery 1.10.2 版本。
$(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>
尝试一个全局变量并对其调用 .abort()
:
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>
告诉我
我在模态状态栏中使用 Ajax 文件上传功能。代码工作正常。但是当用户单击取消按钮(上传时)时,模式关闭但文件正在后台上传到服务器。
我试过xhr.abort();
取消上传的功能。但它不起作用。如何在用户单击取消按钮时停止文件上传过程。
我正在使用 jquery 1.10.2 版本。
$(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>
尝试一个全局变量并对其调用 .abort()
:
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>
告诉我