上传文件避免网络情况而重复点击,造成重复上传

作者: xahy 分类: 笔记 发布时间: 2019-07-17 19:53

由于公司服务器在国外,所以有时候会出现网络问题。
容易导致管理员操作迟迟得不到响应,容易重复操作。
所以前端使用了 layer 友好提示管理员正在操作中+锁住操作按钮,避免重复操作问题。
拿个上传文件操作举例吧:

function uploadFiles(obj){
    //当前点击对象
    var Obj=obj;
    //
    var fileObj = document.getElementById("fileID");
    //锁住上传按钮
    Obj.prop('disabled',true);
    //提示上传文件必须是 Excel 文件
    if(fileObj.value == ""){
        //解开上传按钮
        Obj.prop('disabled',false);
        //弹出提示信息
        layer.msg('请上传 Excel 文件',{icon:5,time:2250});
        return false;
    }
    //弹出上传提示框
    var layObj=layer.confirm('<center>上传中...</center>', {
        closeBtn: 0,
        btn:false
    });
    //请求后台
    $.ajax({
        url: "{:U('uploadFile')}",
        cache: false,
        data: new FormData($('#uploadForm')\[0\]),
        method: 'POST',
        processData: false,
        contentType: false,
        dataType: 'JSON',
        success: function (res) {
            //置空文件域
            fileObj.value="";
            //输出返回信息到浏览器
            console.log(res);
            //关闭上传提示框
            layer.close(layObj);
            //弹出返回信息
            layer.confirm(res.message, {
                closeBtn: 0,
                btn: \['确定'\] //按钮
            }, function (index) {
                //关闭弹窗
                layer.close(index);
                //刷新页面
                window.location.reload();
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            //置空文件域
            fileObj.value="";
            // 状态码
            console.log(XMLHttpRequest.status);
            // 状态
            console.log(XMLHttpRequest.readyState);
            // 错误信息
            console.log(textStatus);
            //关闭上传提示框
            layer.close(layObj);
            //弹出 error
            layer.confirm('upload error', {
                closeBtn: 0,
                btn: \['确定'\] //按钮
            }, function (index) {
                //关闭弹窗
                layer.close(index);
                //刷新页面
                window.location.reload();
            });
        }
    });
}

layer 文档地址:http://www.layui.com/doc/modules/layer.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注