精华内容
下载资源
问答
  • //提交图片出错后,重新提交绑定在这里 layui图片上传方法 http://www.layui.com/doc/modules/upload.html 方法参考全部参数介绍 layui.use('upload', function(){ var $ = layui

    前端页面

        <button type="button" name="url" class="layui-btn" id="test1">上传图片</button>
        <img class="layui-upload-img" id="photo" width="50" height="50">//点击上传图片选择图片后在这里展示
        <p id="demoText"></p>//提交图片出错后,重新提交绑定在这里
    

    layui图片上传方法
    http://www.layui.com/doc/modules/upload.html 方法参考全部参数介绍

    layui.use('upload', function(){
              var $ = layui.jquery
              ,upload = layui.upload;
              //普通图片上传
              var uploadInst = upload.render({
                 elem: '#test1'     /*根据绑定id,打开本地图片*/
                ,url: '${ctx}/origin/user/saveOrUpdate'  /*上传后台接受接口*/
                ,auto: false        /*true为选中图片直接提交,false为不提交根据bindAction属性上的id提交*/
                ,bindAction: '#formSubmit'   /*提交图片*/
                ,choose:function(obj){
                    //预读本地文件示例,不支持ie8
                    obj.preview(function(index, file, result){
                      $('#photo').attr('src', result); //图片链接(base64)
                    });
                  }
                ,done: function(res){
                  //如果上传失败
                  if(res.code > 0){
                    return layer.msg('上传失败');
                  }
                  //上传成功
                }
                ,error: function(){
                  //演示失败状态,并实现重传
                  var demoText = $('#demoText');
                  demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                  demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                  });
                }
              });
        }); 
    

    form表单中的数据提交(因为图片提交在form表单中存在所以from表单的ajax提交(data : $(‘#businessForm’).serialize(),序列化 )方法会失败),需要通过formData 方法进行数据组装,另一种方法为formData.append(“username”, “Groucho”);

    /*数据新增方法*/
        function save() {
            var fd = new FormData();
            var formData = new FormData($( "#signupForm" )[0]);
            $.ajax({
                cache : true,
                type : "post",
                url : "${ctx}/origin/user/saveOrUpdate",
                /* data : $('#signupForm').serialize(), */ // 你的formid
                data : formData,  // 你的formid
                async : false,
                contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
                processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
                error : function(request) {
                    parent.layer.alert("网络超时");
                },
                success : function(data) {
                    if (data.code == 0) {
                        parent.layer.msg("操作成功");
                        parent.reLoad();
                        //注意这两句
                        var index = parent.layer.getFrameIndex(window.name);///先得到当前iframe层的索引
                        parent.layer.close(index);再执行关闭,保存、修改页面完成时要获取当前页面并关闭回到上级页面(list页面)起到刷新返回功能
                    } else {
                        parent.layer.alert(data.msg)
                    }
                }
            });
        }
    

    后台接受(前段图片上传、form表单数据提交会访问两次此接口,有一次访问中form表单数据为空/user中的数据为空 。注意判断)

    //@RequestParam(required=false)MultipartFile file 表示图片接受可为空
    @ResponseBody
    @RequestMapping (value="/saveOrUpdate")
    public Msg saveOrUpdate (@RequestParam(required=false)MultipartFile file, User user,HttpServletRequest request){
            try {
            //获取项目绝对路径,从例如:(D:\eclipse\workspaceproduct3\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\origin-web\static\abc)
                String path = request.getSession().getServletContext().getRealPath("static/abc");
                String pathPhoto = "/static/abc";
                if(!file.isEmpty()){
                String name = file.getOriginalFilename();//获取接受到的图片名称
                File fi = new File(path,name);       //将path路径与图片名称联系在一起
                    if(!fi.getParentFile().exists()){    //判断是否存在path路径下的文件夹
                    fi.getParentFile().mkdirs();       //不存在创建path路径下的文件夹
                }
                file.transferTo(fi);                        //上传图片
                user.setPhoto(pathPhoto+"/"+name);   //为保存图片路径
            }
             if(!StringUtil.isEmpty(user.getLoginname()) && !StringUtil.isEmpty(user.getPassword())){
                userService.saveOrUpdate(user);
             }
        } catch (Exception e) {
            e.printStackTrace();
            return Msg.error();
        }
        return Msg.ok();
    }
    
        request.getSession().getServletContext() 获取的是Servlet容器对象,相当于tomcat容器了.
        getRealPath("/") 获取实际路径,“/”指代项目根目录,所以代码返回的是项目在容器中的实际发布运行的根路径。
        如:D:\apachetomcat6.0.32\webapps\cloudOABaseV4\hwtt_upload
    >
    
    展开全文
  • <form class="layui-form" action="" lay-filter="example" lay-filter="addRelease" id="add" style="width: 490px;...//提交完成后,清空表单 $("#add")[0].reset(); layui.form.render();...
    <form class="layui-form" action="" lay-filter="example" lay-filter="addRelease" id="add" style="width: 490px;"></form>
    ```javascript
    //提交完成后,清空表单
    $("#add")[0].reset();
    layui.form.render();
    ``
    
    ```javascript
    //子页面关闭父页面弹窗
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);//关闭当前页
    
    展开全文
  • ![图片说明](https://img-ask.csdn.net/upload/201609/22/1474542427_914615.png)
  • 主要为大家详细介绍了layer实现弹窗提交信息的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 介绍一款非常好用的前端弹窗插件:根据官方的API:layer的iframe弹窗//iframe层-父子操作layer.open({type: 2,area: ['700px', '530px'],fix...这里以php开发为例 演示如何 提交表单后自动关闭layer弹窗(1)弹出layer...

    介绍一款非常好用的前端弹窗插件:

    根据官方的API:layer的iframe弹窗

    //iframe层-父子操作

    layer.open({

    type: 2,

    area: ['700px', '530px'],

    fix: false, //不固定

    maxmin: true,

    content: 'test/iframe.html'

    });

    这里以php开发为例 演示如何 提交表单后自动关闭layer弹窗

    (1)弹出layer编辑框 :

    function edit(id){

    if(id==null||id==''||id=='undefined'){

    alert('操作编号为空,请联系管理员');

    }

    layer.open({

    type: 2,

    area: ['700px', '530px'],

    fix: false, //不固定

    maxmin: true,

    content: 'index.php?m=content&c=meiti&a=edit_paiqi&id='+id

    });

    }

    (2)编辑页面主要代码

    (3)php后台保存数据并指向一个关闭layer窗口的方法

    public function edit_config_paiqi(){

    $id = trim($_REQUEST['id']);

    $paiqi_db = pc_base::load_model('paiqi_config_model');

    if($_REQUEST['dosubmit']){

    $insertinfo = array();

    $insertinfo['catid'] = trim($_POST['catid']);

    $insertinfo['meitiid'] = trim($_POST['meitiid']);

    $insertinfo['title'] = trim($_POST['title']);

    $insertinfo['meitizhuname'] = trim($_POST['meitizhuname']);

    $insertinfo['meitizhuid'] = trim($_POST['meitizhuid']);

    $insertinfo['createtime'] = SYS_TIME;

    $insertinfo['saturation'] = trim($_POST['saturation']);

    $datas = $paiqi_db->update($insertinfo,array("id"=>$id));

    if($datas){

    showmessage(L('operation_success'),'?m=content&c=meiti&a=closewindow');//保存成功指向关闭窗口方法

    }

    }else{

    $datas = $paiqi_db->select(array("id"=>$id));

    $template = "edit_config_paiqi";

    include $this->admin_tpl($template);

    }

    }

    /**

    * 关闭layer层

    */

    public function closewindow(){

    $template = "close_layer";

    include $this->admin_tpl($template);

    }

    (4)关闭窗口并刷新父窗口页面的关键代码

    $(function(){

    parent.location.reload();//刷新父窗口

    parent.layer.closeAll();//关闭所有layer窗口

    });

    注意:该页面需要加载layer需要的js库才能使用layer方法

    以上这篇php 提交表单 关闭layer弹窗iframe的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • layer 实现弹窗提交信息

    万次阅读 2016-12-11 21:17:17
    layer是非常好用的弹窗插件,具体参见官方文档 点击这里进入。官方有很多示例,使用方法也非常简单,引入官方下载的css和js就可以了。但是有时候,弹窗提醒并不能满足我们的所有要求。例如,在奖品界面,希望点击...

    layer是非常好用的弹窗插件,具体参见官方文档
    点击这里进入。官方有很多示例,使用方法也非常简单,引入官方下载的css和js就可以了。但是有时候,弹窗提醒并不能满足我们的所有要求。例如,在奖品界面,希望点击“编辑奖品”的时候,能弹出对话框让我们来填写信息,如下图所示:

    这里写图片描述

    如何用简洁美观的 layer 实现这一功能呢?官方并没有给我们提供示例,那就自己动手写吧。下面把代码贴出来。

    给“添加奖品”按钮加上单击触发confirmUpdateAward方法

    var awards = "";
    function confirmUpdateAward(i) {
        layer.open({
            type: 1,
            closeBtn: false,
            shift: 7,
            shadeClose: true,
            content: "<div style='width:350px;'><div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项名称</p><input id='awardName' class='form-control' type='text' name='awardName' value='"+awards[i].awName+"'/></div>" +
            "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项描述</p><input id='awardDescription' class='form-control' type='text' name='awardDescription' value='"+awards[i].awDescription+"'/></div>"+
            "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入获奖人数</p><input id='awardUserCount' class='form-control' type='number' name='awardUserCount' value='"+awards[i].awUserCount+"'/></div>"+
            "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项类别</p><input id='awardKind' class='form-control' type='text' name='awardKind' value='"+awards[i].awKind+"'/>" +
            "<button style='margin-top:5%;' type='button' class='btn btn-block btn-success btn-lg' onclick='updateAward("+awards[i].id+")'>提交</button></div>"
        });
    }
    
    function updateAward(awardId){
    
        var awardUserCount = $("#awardUserCount").val();
        if(awardUserCount*1>8888 || awardUserCount*1<1){
            layer.msg('人数必须是1到8888', {
                time: 500, //0.5s后自动关闭
                // btn: ['明白了', '知道了']
            });
        }else{
            var awardName = $("#awardName").val();
            var awardDescription = $("#awardDescription").val();
            var awardKind = $("#awardKind").val();
            $.ajax({
                type: "post",
                url : getContextPath() + "/award/updateAward",
                dataType:'json',
                data: {
                    "awardId":awardId,
                    "awardName":awardName,
                    "awardDescription":awardDescription,
                    "awardUserCount":awardUserCount,
                    "awardKind":awardKind
                },
                success: function(data){
                    var updateSuccess = data.data;
                    if(updateSuccess){
                        layer.msg('修改成功', {
                            time: 500, //0.5s后自动关闭
                            // btn: ['明白了', '知道了']
                        });
                        refreshPage();
                    }else{
                        layer.msg('修改失败', {
                            time: 500, //20s后自动关闭
                            // btn: ['明白了', '知道了']
                        });
                    }
                }
            });
            layer.closeAll();
        }
    }

    这里有几个需要注意的点:

    第一:最后一定要用

    layer.closeAll();

    否则提交之后弹窗不会自己关闭。

    第二

    <input type="number" />

    只能保证用户不能输入字母(实际上字母e是可以输入的,会认为是科学技术法),但是通过Json传到后端的依旧是String类型,在做将该信息用

    Integer.valueOf();

    强转为Integer时候,一定要判断String是否为空,否则会抛异常。

    第三
    这里实际上是用到了一个js方法之间调用巧传对象的方法。

    当我们从数据库取出若干条奖品记录时,每一条记录都应该有一个“修改”按钮。当我们做修改的时候,用户都希望输入框中显示之前的信息,但是js的方法之间调用的时候,传对象很麻烦,有什么简便的方法呢?

    如上面的源码所示,我们只传序号 i 过去。下面这段代码是奖品展示页面的代码,我们可以看到每条记录都有“编辑”按钮。

    $(document).ready(function () {
        refreshPage();
    });
    
    //定义全局变量
    var awards = "";
    
    function refreshPage(){
        $.ajax({
            type: "post",
            url : getContextPath() + "/award/getAllAwards",
            dataType:'json',
            data: {
            },
            success: function(data){
                awards = data.data;
                var awardHtml = "";
                var iLen = awards.length;
                //遍历取出每一条奖品
                for(var i = iLen - 1 ; i >=0  ; i--){
                    awardHtml+="<tr><td><span id='span"+i+"' style='cursor:pointer;' onclick='selectAward("+i+","+iLen+")' class='label label-default'>"+"选中"+"</span></td><td>"+awards[i].awName+"</td><td>"+awards[i].awDescription+"</td><td>"+
                        awards[i].awUserCount+"</td><td>"+awards[i].awKind+"</td><td><span style='cursor:pointer;' class='label label-info' onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span></td><td>" +
                        "<span class='label label-danger' style='cursor:pointer;' onclick='comfirmDeleteAward("+awards[i].id+")'>"+"删除"+"</span></td></tr>";
                }
                $("#awardTable").html(awardHtml);
            }
        });
    }

    注意看

    onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span>

    这句,我们只传了i到我们最开始写的confirmUpdateAward方法里面,却因为在js中定义了全局变量 awards ,就可以巧妙地在confirmUpdateAward方法中使用awards[i]了。

    layer做信息提交遇到的坑都写在这里了,应该再没什么别的问题了,有需要的话可以留言评论。

    说明
    如有转载,请务必在文章开头注明出处
    http://blog.csdn.net/antony9118/article/details/53575597

    展开全文
  • layer表单验证与提交

    2017-01-11 18:17:17
    一.layer表单提交及验证方法(添加员工页面)<form class="layui-form layui-form-pane1 pzjzsj" action=""><div class="layui-form-item"> <label class="layui-form-label">手机号</label>...
  • 今天小编就为大家分享一篇使用layer弹窗提交表单时判断表单是否输入为空的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 点击layer弹窗btn按钮,提交弹窗iframe框架内子页面的表单数据,这样子页面可以去掉提交按钮,达到美化目的。
  • layer层遇到form表单提交

    千次阅读 2017-07-06 14:36:15
    layer弹出层页面里面有form表单提交的,layer层提示会出现闪退的现象。 原因如下:  当表单提交提交的时候,一般会进行页面的跳转(不成功时跳转到当前页面)。  而我们此处的页面就相当于刷新了一下,所以layer...
  • function msgShow(getname,getuserid){ ... layer.open({ type: 1 //此处以iframe举例 ,title: '收件人:'+getname+'(ID:'+getuserid+')' //弹窗的标题部分(按照需求,传入参数并显示) ,area: ['490px',...
  • 使用layer弹窗提交表单时判断表单是否输入为空 获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可 使用时一定他要先引入jq1.8,或者以上...
  • php 提交表单 关闭layer弹窗iframe

    千次阅读 2016-02-26 10:33:55
    php 使用layer弹出iframe 提交表单后 自动关闭layer并且刷新父页面
  • layer.confirm防止重复提交 layer.confirm是非阻塞,试了好多方法,只有下面方法有效! layer.confirm("是否确认付款?", function(index, layero){ $(layero).find('.layui-layer-btn0').css('pointer-events','...
  • 表单提交验证 问题描述: 问题1:表单提交laye @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析: ...
  • layer.open({ title: '信息' ,content: '所输入的临时账号已存在,请重新输入' }); 查看是不不是使用了submit的表单提交方式 查看地方:提交的按钮的butto...
  • 今天小编就为大家分享一篇layer弹出层自定义提交取消按钮的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇php 提交表单 关闭layer弹窗iframe的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 842
精华内容 336
关键字:

layer提交