SweetAlert 2.0+弹出确认框,点击确定后执行方法

这篇博客介绍了如何使用SweetAlert 2.0实现一个带有确认功能的弹框,当用户点击确定按钮时,会执行文件上传的操作;而点击取消则会放弃上传。通过示例代码,展示了SweetAlert的then方法在处理用户交互时的应用。

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

JS的文件上传方法,点击确认按钮后上传文件,点击取消放弃上传。
方法如下:

function upload(){
	var fileName = $("#filename")[0].innerHTML;	//获取文件名
    var ext = fileName.substring(fileName.lastIndexOf(".")+1, fileName.length).toLowerCase();
		if (ext == 'txt') {	//判断文件类型
		swal({	
			icon: "warning",
			title: [[#{confirmUpload}]],	//thymeleaf取国际化文件中的值
			text: [[#{cannotdeleteimort}]],
			buttons:{
				cancel: {	//取消按钮
				    text: [[#{cancel}]],
				    value: null,
				    visible: true
				},
				  confirm: {	//确认按钮
				    text: [[#{comfirm}]],
				    value: true,
				    visible: true
				  }
			}
		}).then(function(isOk){		//判断是否点击确认
			if(!isOk)	//如果点击取消
				swal.close();
			else{
				$("#uploadForm").ajaxSubmit({	//点击确认
	    			type: "post",
	    			url:'/xxx/xxx',
	    			data: $("#uploadForm").serialize(),
	    			dataType: "text",
	    			cache: false,
	    			beforeSend: function(){
						swal({
							icon: "info",
								text:[[#{importing}]]
							});
	    			}, 
	    			complete: function(){  
	    			    swal.close();
	    			},
	    			error : function(textStatus, errorThrown) {
						swal({
							icon: "error",
							text:[[#{importFail}]]+textStatus
						});
	       			},
	   			    success: function(data){
	   			    	if(data=="x")
    					    swal([[#{x}]]);
	   					else 
	    					swal(data);
	    			}
	    		});
			}
		});
	}else{//上傳文件應該是.txt
		swal({
			icon: "error",
			text:[[#{txtfile}]]
		});
	}
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值