[英]cancel upload button for image upload
I have created a progress bar to show the progress of the file upload. 我创建了一个进度条来显示文件上传的进度。 Now I am trying to create a "cancel upload" button next to progress bar.
现在,我尝试在进度条旁边创建一个“取消上传”按钮。
Code for the progress bar JQuery is: 进度条JQuery的代码是:
(function () {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
var percentVal = '0%';
var x = 1;
var y = null; // To keep under proper scope
$('form').ajaxForm({
beforeSend: function () {
status.empty();
percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
percentVal = percentComplete + '%';
if (percentVal != '100%')
{
bar.width(percentVal)
percent.html(percentVal);
}
//console.log(percentVal, position, total);
},
//success: function () {
// var percentVal = '95%';
// bar.width(percentVal)
// percent.html(percentVal);
//},
complete: function () {
percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
delay(500);
location.reload();
}
});
})();
now for the cancel button input tag: 现在为取消按钮输入标签:
$(document).ready(function () {
$('#cancel').click(function () {
location.reload();
});
});
Jquery Pulgins: jQuery插件:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
Now if I click on 'cancel' button the image still gets upload. 现在,如果我单击“取消”按钮,则图像仍会上传。 Can someone please help me out for the 'cancel' button.
有人可以帮我解决“取消”按钮的问题。 Thanks
谢谢
thanks a lot for the help.. after spending couple of mins searching for the solution i came up with this solution.. and its working. 非常感谢您的帮助。.在花了几分钟的时间寻找解决方案之后,我想到了这个解决方案..及其工作原理。
(function () {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
var percentVal = '0%';
var x = 1;
var y = null; // To keep under proper scope
$('form').ajaxForm({
beforeSend: function (xhr) {
status.empty();
$('#cancel').click(xhr.abort) // for cancel button
percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
if (percentVal == '100%') {
$("#cancel").hide();
}
},
success: function (xhr) {
$("#cancel").hide();
$('#cancel').click(xhr.abort)
},
complete: function () {
location.reload();
}
});
})();
(function () {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
var percentVal = '0%';
var x = 1;
var y = null; // To keep under proper scope
$('form').ajaxForm({
beforeSend: function () {
status.empty();
percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
percentVal = percentComplete + '%';
if (percentVal != '100%')
{
bar.width(percentVal)
percent.html(percentVal);
}
//console.log(percentVal, position, total);
},
//success: function () {
// var percentVal = '95%';
// bar.width(percentVal)
// percent.html(percentVal);
//},
complete: function () {
percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
delay(500);
location.reload();
}
$('#cancel').click(function () {
// Abort the data upload if it's running.
data.abort();
// Overwrite the plugin's default submit function.
data.submit = function () { return false; };
});
});
})();
});
I think this should work now. 我认为现在应该可以了。
PS: Found the solution in Implementing Remove Buttons for jQuery-File-Upload PS:在为jQuery-File-Upload实现删除按钮中找到了解决方案
You may find it suitable for further reading. 您可能会发现它适合进一步阅读。
You could create a hidden input box right in the HTML of the form 您可以在表单的HTML中直接创建一个隐藏的输入框
<input id="textHiddenCancel" hidden type="text" value=""/>
Modify your onclick event for your cancel input button as follows: 修改取消输入按钮的onclick事件,如下所示:
<input id="buttonCancel" type="button" value="Cancel Upload"
onclick="textHiddenCancel.value = 'cancel';" />
In your progress bar loop add: 在进度条循环中添加:
if ( textHiddenCancel.value == 'cancel' ) {
// code to redirect to "you have cancelled" HTML page
// or to display a cancelled message on the form
// or whatever.
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.