精华内容
下载资源
问答
  • 基于layui邮件写信界面,包含附件上传部分的PHP后台...针对于使用layui作为前端所做的邮件发送界面,能够对附件实现上传与数据的回调,有上传状态(上传等待、上传完成等)或者可以加上进度条(这个我没弄完) ...
                                                                    ——Gerhard
    

    - 针对于使用layui作为前端所做的邮件发送界面,能够对附件实现上传与数据的回调,有上传状态(上传等待、上传完成等)或者可以加上进度条(这个我没弄完)

    upload.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="layui/layui.js" ></script> 
    
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="css/upload.css">
    <title>邮件</title>
    
    </head>
    <body>
    <div class="container" id="container">
        <!--左侧菜单-->
        <div id="left" class="left_body"></div>
        <!--右侧内容-->
        <div id="content" class="right_body">
    
    
    <form action="" name="form2" class="layui-form" lay-filter="example">
        <div class="content_bigbox">
            <!--按钮工具栏-->
            <div class="tool_bar">
                <div class="title">
                    <h2 class="styleFontColor"><span class="fe-font icon-489 styleFontColor"></span><i class="icon iconfont icon-xie"></i>新建邮件</h2>
                </div>
                <ul style="float:right;">
                    <li class="left">
                        <ul>
                            <li class="last_btn">
                                <a onclick="Submits('send')"  class="auto_btn">发送</a>
                            </li>
                            <li>
                                <a onclick="Submits('save')" class="auto_btn">存草稿</a>
                            </li>
                            <li>
                                <a onclick="newMail()" class="auto_btn btn_danger">清空</a>
                            </li>
                            <li>
                                <a href="index.html" class="auto_btn btn_primary">关闭</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--写邮件-->
            <div class="readmailinfo">
                <div class="left_area">
                    <div id="msgshow" style="display: none;">收件人不能空</div>
                    <ul class="nmail">
                        <li class="pad-t8">
                            <label class="tit styleFontColor">收件人</label>
                            <div class="right">
                                <div class="orang"><input class="input" type="text" name="to2" id="to2" value="" ><i class="icon iconfont icon-structure"></i></div>
                            </div>
                        </li>
                        <li id="cch" style="display:none;">
                            <label class="tit styleFontColor ">抄送人</label>
                            <div class="right">
                                <div class="orang2"><input class="input" type="text" name="cc2" id="cc2" value="" ><i class="icon iconfont icon-structure"></i></div>
                            </div>
                        </li>
                        <li id="bcch" style="display:none;">
                            <label class="tit styleFontColor">密送人</label>
                            <div class="right">
                                <div class="orang2"><input class="input" type="text" name="bcc2" id="bcc2" value="" ><i class="icon iconfont icon-structure"></i></div>
                            </div>
                        </li>
                        <li>
                                <div class="cb_ch" style="margin-left:110px;">
                                    <span id="addcc" class="styleFontColor">添加抄送</span>
                                    <span>|</span>
                                    <span id="addbcc" class="styleFontColor">添加密送</span>
                                </div>
                        </li>
                        <li>
                            <label class="tit styleFontColor">主题</label>
                            <div class="right">
                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入主题" class="layui-input">
                            </div>
                        </li>
    
                        <li>
                            <label class="tit styleFontColor">附件</label>
                            <div class="right2">
                                <div style="position:relative;">
                                    <div class="layui-upload-drag" id="attachment">
                                      <i class="layui-icon"></i>
                                      <p id="hidp1" class="hidp1">上传附件</p>
                                      <p id="hidp2">点击上传附件,或将文件拖拽到此处</p>
                                      <span id="hidp2" class="hidp2">* 单文件大小不能超过 10 MB</span>
                                    </div>
                                    <span id="hidspan" class="outspan hidspan">* 单文件大小不能超过 10 MB</span>
                                    <a id="dragbtn">
                                        <i id="hidicon1" class="layui-icon layui-icon-triangle-r hidicon1" title="拖拽文件"></i>
                                        <i id="hidicon2" class="layui-icon layui-icon-close-fill" title="取消拖拽"></i>
                                    </a>
                                </div>
                                <div class="ath_box clearfix" id="ath_box">
                                    <ul id="athList">
                                        <!--<li class="fj" >
                                             <dl>
                                                  <dd class="uping">
                                                        <i class="icon iconfont icon-zip"></i>
                                                        <p title="附件一.zip">附件一.zip</p>
                                                        <em>666k</em>
                                                  </dd>
                                                  <dd class="state"><span style="color: #5FB878; font-weight:700;">上传成功</span></dd>
                                                  <dd class="reUp"><span class="layui-btn layui-btn-xs demo-reload layui-hide">重传</span></dd>
                                                  <dd class="layui-progress" lay-showpercent="true" lay-filter="demo">
                                                      <div class="layui-progress-bar" lay-percent="0%"></div>
                                                  </dd>
                                             </dl>
                                             <a class="demo-delete" title="删除附件"><i class="layui-icon layui-icon-close"></i></a>
                                        </li>-->
                                    </ul>   
                                </div>
    
    
                            </div>
                        </li>
                        <li class="clearfix">
                            <label class="tit styleFontColor">已读回执</label>
                            <div class="layui-input-block">
                               <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                            </div>
                        </li>
                        <li>
                            <div style="width:99.8%; margin:auto">
                                <img src="images/a.jpg" width="100%" />
                                <!--<textarea id="editor" name="editor" rows="5" style="display: none;"></textarea>-->
                            </div>
                        </li>
                        <li>
                            <label class="tit styleFontColor">发件人</label>
                            <div class="send_id">
                                <span> 
                                    <input name="mailname1" id="mailname1" type="text" value="Gerhard" class="input_nob">
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
    
    <input type="hidden" name="_token" class="tag_token" value="" />
    <button type="button" class="layui-btn layui-hide" id="autoAction">上传附件</button>
    <button type="button" class="layui-btn site-demo-active layui-hide" data-type="loading"></button>
        </div>
    
    </div>
    </body>
    
    <script>
    $(function(){
      $('#dragbtn').click(function(){  //给dragbtn'绑定一个点击事件;
            $("#attachment").toggleClass("narrow");
            /*控制图标*/
            $("#hidicon1").toggleClass("hidicon1");
            $("#hidicon2").toggleClass("hidicon2");
    
            /*控制文字*/
            $("#hidp1").toggleClass("hidp1");
            $("#hidp2").toggleClass("hidp2");
            $("#hidspan").toggleClass("hidspan");
      });
    });
    
      $().ready(function () {
        $("#addcc").toggle(function () {
          $(this).html("删除抄送");
          $("#cch").show();
          $("#cc3").focus();
    
        }, function () {
          $(this).html("添加抄送");
          $("#cch").hide();
          $("#cc").val("");
          $("#cc2").val("");
          jQuery.each($(".addr"), function () {
            if ($(this).attr("id") == 'tcc3') {
              $(this).remove();
            }
          });
    
        });
        $("#addbcc").toggle(function () {
          $(this).html("删除密送");
          $("#bcch").show();
          $("#bcc3").focus();
        }, function () {
          $(this).html("添加密送");
          $("#bcch").hide();
          $("#bcc").val("");
          $("#bcc2").val("");
          jQuery.each($(".addr"), function () {
            if ($(this).attr("id") == 'tbcc3') {
              $(this).remove();
            }
          });
        });
      });
     setTimeout("document.getElementById('ath_box').style.display='none'",0000);
    
    </script>
    <script>
    layui.use(['element','layer','form'], function(){
      var form = layui.form
      var element = layui.element;
      var layer = layui.layer;
    
      //表单初始赋值
      form.val('example', {
      })
    });               
    
    /*文件上传*/
    layui.use('upload', function(){
      var $ = layui.jquery;
      var upload = layui.upload;
      var tag_token = $(".tag_token").val();
      //多文件列表示例
      var athListView = $('#athList')  
    
      var uploadListIns = upload.render({
        elem: '#attachment'
        ,auto:false         //选择是否直接上传
        //,bindAction: '#autoAction'
        ,accept: 'file'
        ,multiple: true
        //,size:10240
        ,url: 'up.php'
        ,drag: true         //是否允许拖拽上
        ,data:{'_token':tag_token}
        ,choose: function(obj){
            setTimeout("document.getElementById('ath_box').style.display='table'",0000);
            //预读本地文件示例,不支持ie8
            obj.preview(function(index, file, result){
                delete files;
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 
                console.log('预读:');console.log(files);
                var name=file.name;   
                var arr = name.split('.');          //通过.分隔字符串,成字符串数组
                var suffix = arr[arr.length-1]      //取最后一个,就是文件后缀名
                var icon='';
                if(suffix=='zip'||suffix=='rar'||suffix=='jar'||suffix=='7z'||suffix=='tar'){ icon='icon-zip'}
                else if(suffix=='jpg'||suffix=='jpeg'||suffix=='png'||suffix=='gif'||suffix=='psd'||suffix=='ai'||suffix=='webp'){ icon='icon-pic'}
                else if(suffix=='ppt'||suffix=='pptx'){ icon='icon-ppt'}
                else if(suffix=='doc'||suffix=='docx'){ icon='icon-doc'}
                else if(suffix=='txt'){ icon='icon-txt'}
                else if(suffix=='pdf'){ icon='icon-pdf'}
                else{ icon='icon-qita'}
    
                var li = $(['<li class="fj" id="upload-'+ index +'">'
                  ,'<dl>'
                      ,'<dd class="uping" id="uping-'+ index +'">'
                            ,'<i class="icon iconfont '+ icon +'"></i>'
                            ,'<p title="'+ file.name +'">'+ file.name +'</p>'
                            ,'<em>'+ (file.size/1014).toFixed(1) 
                            + 'kb</em>'
                      ,'</dd>'
                      ,'<dd id="state-'+ index +'" class="state">等待上传...</dd>'
                      ,'<dd class="reUp">'
                        ,'<span class="layui-btn layui-btn-xs demo-reload">重传</span>'
                      ,'</dd>'
                      ,'<dd class="layui-progress" id="progress-'+index+'" lay-showpercent="true" lay-filter="demo">'
                          ,'<div class="layui-progress-bar" lay-percent="0%"><span class="layui-progress-text"></span></div>'
                      ,'</dd><dd></dd>'
                  ,'</dl>'//***
                  ,'<a class="demo-delete" title="删除附件"><i class="layui-icon layui-icon-close"></i></a>'
                ,'</li>'].join(''));
    
                //重传
                li.find('.demo-reload').on('click', function(){
                  obj.upload(index,file);
                  delete files;
                  console.log('重传后:');console.log(files);
                });
    
                //单个删除
               li.find('.demo-delete').on('click', function(){
                     delete files[index]; //删除对应的文件
                     li.remove();
                     console.log('删除后:');console.log(files);
                     uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 
    
                     /*是否隐藏*/
                     var ath = document.getElementById("athList");
                     var ath_li= ath.getElementsByTagName("li");
                     if(ath_li.length>0) {}
                     else {setTimeout("document.getElementById('ath_box').style.display='none'",0000);}
               });
                var bsd="#upload-"+index;
                if($(bsd).length>0){}
                else{ 
                    athListView.append(li); 
                } 
                obj.upload(index,file);   //单个上传
             });
        }
    
        ,done: function(res, index, upload){
            //如果上传成功
            if(res.status == 1){
                var li = athListView.find('li#upload-'+ index);
                dd=li.children().children();
                dd.eq(1).html('<span style="color: #5FB878;">上传成功</span>');
                dd.eq(2).find('.demo-reload').addClass('layui-hide'); //隐藏重传
                //dd.eq(2).html(''); //清空操作
                console.log('成功后:');console.log(res);
                setTimeout("document.getElementById('uping-"+ index +"').style.opacity='1'",3000);  //隐藏
                setTimeout("document.getElementById('state-"+ index +"').style.display='none'",3000);  //隐藏
                return layer.msg(files[index].name+' 上传成功');
                delete files[index]; //删除文件队列已经上传成功的文
            }
            else{//上传失败
                this.error(res,index, upload);
                return layer.msg('<span style="color: #FF5722;">'+files[index].name+'</span> 上传失败,请稍后再尝试');
            } 
        }
        //,allDone
        ,error: function(res,index, upload){
            //演示失败状态,并显示重传
            var li = athListView.find('li#upload-'+ index);
            dd=li.children().children();
            dd.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
            dd.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
            console.log('失败后:');console.log(res)
        }
      });
    });
    
    </script>

    up.php

    <?php
    
    $status = 0;
    $message = '';
    
    if ($_POST) {
        //上传具体操作
        $file_name = iconv("UTF-8","GBK",$_FILES['file']['name']);
        //$file_type = $_FILES["file"]["type"];
        $file_tmp = $_FILES["file"]["tmp_name"];
        $file_error = $_FILES["file"]["error"];
        $file_size = $_FILES["file"]["size"];
    
        if ($file_error > 0) { // 出错
            $message = $file_error;
        } else if($file_size > 10240000) { // 文件太大了
            $message = "上传文件不能大于10MB";
        }else{
            //$file_name_arr = explode('.', $file_name);
            //$new_file_name = date('YmdHis') . '.' . $file_name_arr[1];
            $file_path = "upload/" . $file_name;
            if (file_exists($file_path)) {
                $message = $file_name."此文件已经存在啦";
            } else {
                $upload_result = move_uploaded_file($file_tmp, $file_path); // 此函数只支持 HTTP POST 上传的文件
                if ($upload_result) {
                    $status = 1;
                    $message = $file_path;
                } else {
                    $message = $file_name."文件上传失败,请稍后再尝试";
                }   
            }
        }
    } else {
        $message = "参数错误";
    }
    return showMsg($status, $message);
    
    function showMsg($status,$message = '',$data = array()){
        $result = array(
            'status' => $status,
            'message' =>$message,
            'data' =>$data
        );
        exit(json_encode($result));
    }

    upload.css

    div, ul, li, tr, td, th, h1, h2, h3, a { margin: 0;padding: 0;font-size: 14px;}
    
    body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, li, fieldset, button, div, span, a, label, input, select, option, textarea {
        font-family: 'Microsoft Yahei', Helvetica Neue, Arial, serif;
        font-size: 14px;
        color: #444444;
    }
    div, li, tr, td, th {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    *{margin:0;padding:0}
    ul,ol,li{ list-style:none; margin: 0; padding: 0;}
    em, i, u { font-style: normal;}
    a{ cursor: pointer; text-decoration: none; color: #2777a7; }
    a:hover { text-decoration: underline;}
    a:focus{ outline:none;}
    a.auto_btn {     
        padding: 0 15px;
        display: block;
        cursor: pointer;
        float: left;
        height: 27px;
        line-height: 27px;
        background-color: #009688;
        border-radius: 4px;
        color: #fff;
        text-decoration: none;
    }
    a.auto_btn:hover{ opacity:.8;}
    
    .right_body a.btn_primary{border: 1px solid #C9C9C9; background-color: #fff; color: #555; height:25px; line-height:25px;}
    .right_body a.btn_danger{ background-color:#ff5722;}
    .right_body a.btn_normal{ background-color:#1E9FFF;}
    
    .grid_1200{ width:1200px; margin:auto;}
    .grid_1152{ width:1152px; margin:auto;}
    .grid_1000{ width:1000px; margin:0 auto;clear: both;}
    .mar-t30 { margin-top: 30px!important;}
    .mar-b8 { margin-bottom: 8px;}
    .pad-t8{margin-top: 8px; position:relative;}
    
    .clearfix {
        display: table;
        content: " ";
    }
    
    html {
        height: 100%;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 0;
    }
    .right_body{    
        height: 100%;
        padding:10px;
        margin-left: 165px;
        min-width:650px;}
    
    /* 图标 */
    .icon {
        font-size: 16px;
        font-weight:normal;
        position:relative;
    }
    .right_body .title .icon{
        font-size: 22px;
        margin-right: 5px;
        top: 2px;
    }
    .right_body .orang .icon,.right_body .orang2 .icon{
        float: right;
        position: absolute;
        margin-left: -24px;
        margin-top: 8px;
        font-size:17px;
        color:#666;
    }
    /*通用*/
    .input {
        width: 100%;
        height: 35px;
        border: #ccc 1px solid;
        line-height: 35px;
        padding-left: 10px;
        box-sizing: border-box;
        border-radius:2px;
    }
    
    .layui-table-view .layui-table td { cursor: pointer;}
    .layui-table-view .layui-form-checkbox {
        cursor:default;
    }
    
    .readmailinfo .layui-input{ height:35px;}
    input, select {
        vertical-align: middle;
        outline: none;
    }
    .content {
        height: 100%;
        min-height: 400px;
        vertical-align: top;
    }
    .textarea {
        border: 0px solid;
        background-color: #f7f7f7;
        overflow: auto;
        overflow-x: hidden;
        color: #444;
    }
    
    /*新建邮件*/
    .content_bigbox {
        width: 100%;
        border: none;
    }
    .content_bigbox .tool_bar {
        width: 100%;
        height: 45px;
        line-height: 45px;
        vertical-align: middle;
        border-bottom: 1px solid #eee;
    }
    .content_bigbox .title {
        height: 40px;
        line-height: 40px;
        float: left;
        padding-left: 5px;
        margin-top: 5px;
        position: absolute;
    }
    .content_bigbox .title h2 {
        height: 37px;
        color: #009688;
        font-size: 15px;
        font-weight: bold;
        padding-left: 10px;
        line-height: 38px;
        margin: 0;
        float: left;
    }
    
    .content_bigbox .title span{ color:#888;}
    
    
    
    .tool_bar ul li.left {
        height: 27px;
        float: right;
        margin-top: 10px;
    }
    .tool_bar ul li.left li {
        height: 27px;
        float: left;
        padding-left: 10px;
        color: #444;
        font-size: 12px;
    }
    
    .readmailinfo {
        width: 100%;
        height: 100%;
    }
    .left_area {
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
    .left_area .nmail {
        width: 100%;
        margin: 0 auto;
        border: none;
        position: relative;
    }
    .left_area .nmail li{
        padding-top: 4px;
        padding-bottom: 4px;
        width:100%;
    }
    .left_area .nmail li .tit {
        width: 95px;
        text-align: right;
        color: #333;
        padding-right: 10px;
        height: 35px;
        line-height: 35px;
        white-space: nowrap;
        float: left;
    }
    .left_area .nmail li .right {
        height: 35px;
        margin-left: 110px;
        position:relative;
        padding-right:15%;
    }
    .left_area .nmail li .right2{ height:auto; position:relative; margin-left:110px;padding-right:15%;}
    
    .left_area .nmail li .cb_ch{ margin-left:110px;}
    .left_area .nmail li .cb_ch span{ font-size:12px;cursor:pointer; color:#275991;}
    
    /*附件*/
    .readmailinfo .layui-upload-drag {
        width: 100%;
        position: relative;
        display: inline-block;
        padding: 0px;;
        border: 1px dashed #ccc;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
    }
    
    .readmailinfo .narrow {
        width: 90px;
        display: inline-block;
        vertical-align: middle;
        height: 35px;
        line-height: 35px;
        padding: 0 10px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 2px;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    .readmailinfo .narrow p{ float:right; color:#fff;}
    .readmailinfo .narrow .layui-icon {
        font-size: 18px;
        color: #fff;
        margin-right:4px;
    }
    .readmailinfo .hidp1{ display:none;}
    .readmailinfo .narrow .hidp2{ display:none;}
    
    #dragbtn .hidicon1{ display:none}
    #dragbtn .hidicon2{ display:none}
    
    #dragbtn i{font-size:24px; color:#555;top:5px; position:absolute;  text-decoration:none; width:20px; height:30px;}
    #dragbtn #hidicon2{ top: 1px; right:3px; }
    
    .readmailinfo .layui-upload-drag span{ color:#999;font-size:12px; line-height: 30px;}
    .readmailinfo .outspan{
        position: absolute;
        left:180px;
        line-height: 35px;
        color:#999;
        font-size:12px;
    }
    .hidspan{ display:none;}
    
    .readmailinfo .layui-form-switch {
        margin-top: 6px;
    }
    
    .readmailinfo .ath_box{ background:#f1f1f1; padding: 8px 0 0 8px; margin-top:8px;}
    
    .readmailinfo ul li.fj{ 
        width:auto; 
        float:left; 
        padding: 10px; 
        padding-bottom:0;
        margin: 0px 8px 8px 0;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.05);
        transition: all .2s ease;
        -moz-transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
        position:relative;
    }
    .readmailinfo ul li.fj:hover{
        box-shadow: 0 2px 6px rgba(0,0,0,.2);
        -webkit-transform: translate3d(0,-3px,0);
        -moz-transform: translate3d(0,-3px,0);
        -ms-transform: translate3d(0,-3px,0);
        -o-transform: translate3d(0,-3px,0);
        transform: translate3d(0,-3px,0);
    }
    .readmailinfo ul li.fj dd{ padding:0; text-align:center;}
    .readmailinfo ul li.fj dl{ position:relative;height:92px;}
    
    .readmailinfo ul li.fj dd.uping{background: #fff; opacity: 0.4;}
    .readmailinfo ul li.fj dd.state{ top: 0px;  position: absolute; width:100%; font-weight:700; color:#666;}
    .readmailinfo ul li.fj dd.reUp {position: absolute;top: 22px; width:100%;}
    .readmailinfo ul li.fj dd.reUp .demo-reload{width:50px; margin:auto; }
    
    .readmailinfo ul li.fj dd .icon{ font-size:35px; margin-bottom:10px;}
    
    .readmailinfo ul li.fj dd p,.readmailinfo ul li.fj dd em{overflow: hidden;text-overflow: ellipsis;white-space: nowrap; line-height:20px; font-size:12px; width:100px;}
    
    .readmailinfo ul li.fj dd p{ color:#009688; margin-top:5px;}
    
    .readmailinfo ul li.fj a{ position:absolute; top:0; right:0; display:block; text-decoration:none; color:#ff5722;}
    .readmailinfo ul li.fj:hover a{ display:block;}
    
    .readmailinfo ul li.fj .layui-progress{ margin-top:3px;}
    .readmailinfo ul li.fj .layui-progress-text { top: -7px; color:#666;}
    .readmailinfo ul li.fj span.false{ position:absolute; display:block;}
    
    
    /*测试其他*/
    .readmailinfo.other .ath_box {
        margin-top: 8px;
        background:#fff;
    }
    
    .readmailinfo.other ul li.fj {
        width: 110px;
        float: left;
        padding: 10px;
        margin: 0px 10px 10px 0;
        border-radius: 2px;
        background-color: #f1f1f1;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.05);
        transition: all .2s ease;
        -moz-transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
        position: relative;
        height:auto;
    }
    
    .readmailinfo.other ul li.fj dl {
        position: relative;
        padding: 10px;
        background: #fff;
        height: 97px;
    
    }
    
    .left_area .nmail .send_id {
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        text-align: left;
    }
    .left_area .nmail .send_id span {
        height: 30px;
        background-position: center;
        display: inline-block;
        float: left;
        margin: 0;
    }
    .input_nob {
        width: auto;
        background: none;
        border: none;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
    }
    
    #msgshow {
        z-index: 999;
        width: 150px;
        background: #FFB800;
        height: 25px;
        line-height: 25px;
        color: #ffffff;
        margin-top: -17px;
        position: absolute;
        top: 26px;
        left: 360px;
        font-size: 14px;
        display: none;
        text-align: center;
    }
    /*新建邮件end*/

    源代码下载:https://download.csdn.net/download/m0_38085778/10572618

    展开全文
  • 先上效果图 直接干货 前端发送ajax请求: $("#subQuestion").click(function () { layer.prompt({ formType: 2, value: '您有什么问题都可以向我们反馈,我们会尽快处理!', title: '问题提...

    先上效果图
    在这里插入图片描述
    在这里插入图片描述

    直接干货

    前端发送ajax请求:

        $("#subQuestion").click(function () {
                layer.prompt({
                    formType: 2,
                    value: '您有什么问题都可以向我们反馈,我们会尽快处理!',
                    title: '问题提交'
                }, function (question, index, elem) {
                    var loadindex = layer.load(1, {
                        shade: [0.3, '#000000'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: "/sendQuestion?question=" + question,
                        type: "GET",
                        success: function () {
                            layer.close(loadindex);
                            layer.msg("提交成功,感谢您的反馈,我们会尽快处理相关问题。", {icon: 1});
                            layer.close(index);
                        }
                    });
                });
            })
    

    maven引入jar包(pom.xml):

     <!--邮箱验证-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-mail</artifactId>
            </dependency>
    

    application.yml:

    spring:
      mail:  #邮箱
        default-encoding: UTF-8
        host: smtp.qq.com
        username: XXXX@qq.com			#发送邮件的邮箱
        password: xxxxxxmxyswdfbh		#发送邮件邮箱的KEY,可以去百度一下邮箱如何开启stmp 就知道了
        port: 465
        auth: true
        properties:
          mail.smtp.socketFactory.fallback: false
          mail.smtp.socketFactory.port: 465
          mail.smtp.socketFactory.class: javax.net.ssl.SSLSocketFactory
    

    后端Controller层:

    package com.protectzaizai.schoolcardoa.controller;
    
    import com.protectzaizai.schoolcardoa.entity.User;
    import com.protectzaizai.schoolcardoa.service.EmailService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.bind.annotation.SessionAttribute;
    
    import javax.servlet.http.HttpServletRequest;
    
    /**
     * @Author: 动感小⑦
     * @Date:2020/2/17 16:47
     */
    @RestController
    public class EmailController {
    
        @Autowired
        EmailService emailService;
    
        @GetMapping("/sendQuestion")
        public void verifyEmail(HttpServletRequest request, @SessionAttribute("user") User user, String question) {
            String content = "提交人:" + user.getUName() + "     学号或工号:" + user.getUAccount();
            content += "     问题内容:" + question;
            emailService.sendSimpleMail("xxxxxx@qq.com", "校园卡申请系统问题邮件", content);			//这里邮箱是发送的目的邮箱
        }
    }
    

    EmailService 接口层:

    package com.protectzaizai.wxtext_mp.service;
    
    import org.apache.poi.ss.usermodel.Workbook;
    
    import java.io.InputStream;
    import java.util.List;
    
    /**
     * @Author : qipin
     * @DATE : 2019/12/15 0015 13:28
     */
    public interface EmailService {
        void sendSimpleMail(String toEmail, String title, String content);
    }
    

    EmailServiceImpl 实现类:

    package com.protectzaizai.wxtext_mp.service.impl;
    
    import com.protectzaizai.wxtext_mp.service.EmailService;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.mail.SimpleMailMessage;
    import org.springframework.mail.javamail.JavaMailSender;
    import org.springframework.stereotype.Service;
    
    /**
     * @Author : 动感小⑦
     * @DATE : 2019/10/15 0015 20:20
     */
    @Service
    public class EmailServiceImpl implements EmailService {
    
        @Value("${spring.mail.username}")
        private String username;
    
        @Autowired
        JavaMailSender mailSender;
    
        Logger LOGGER = LoggerFactory.getLogger(this.getClass());
    
    
        @Override
        public void sendSimpleMail(String toEmail, String title, String content) {
            SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
            //设置寄件人
            simpleMailMessage.setFrom(username);
            //设置收件人
            simpleMailMessage.setTo(toEmail);
            //设置标题
            simpleMailMessage.setSubject(title);
            //设置内容
            simpleMailMessage.setText(content);
    
            //发送邮件
            mailSender.send(simpleMailMessage);
    
            LOGGER.info("邮件发送成功");
        }
    }
    

    大功告成!

    展开全文
  • 实现layui数据表格头部工具栏的搜索功能,并将搜索的信息进行一键发送邮件

    好久没写学习记录了,只要有空就会慢慢补回来。这次主要是实现layui数据表格头部工具栏的搜索功能,并将搜索的信息进行一键发送邮件。这次的功能涉及到(三)的重载功能还有一个新的头部工具栏。

    搜索功能和一键发送功能 - 前端

    前端是数据表格头部工具栏有一个搜索框,对是否支付进行搜索。另外还包含一个“搜索”按钮和“一键发送”按钮。

    • Html代 码
    <script type="text/html" id="toolbarDemo">
        <div class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">查询:</label>
                <div class="layui-input-block">
                    <select id="pay_status" lay-verify="required">
                        <option value="">请选择</option>
                        <option value="1">已支付</option>
                        <option value="0">未支付</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <button id="submit-btn" class="layui-btn layui-btn-sm" data-type="reload">&nbsp;&nbsp;</button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="send_key">一键发送</button>
                </div>
            </div>
        </div>
    </script>
    
    • 效果
      头部工具栏搜索

    搜索功能- JS部分

    这部分代码的实现类似我之前写的学习记录(三)并且参照layui文档即可。

      var $ = layui.$, active = {
          reload: function(){
              var demoReload = $('#pay_status');
              console.log(demoReload.val());
              //执行重载
              table.reload('register', {
                  url:"{:url('/background/EmailManagement/pay_reload')}"
                  ,page: {
                      curr: 1 //重新从第 1 页开始
                  }
                  ,where: {
                          status: demoReload.val() //发送搜索条件的值
                  }
              });
          }
      };
    //这里绑定的是搜索按钮
      $('#submit-btn').on('click', function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
      });
    

    搜索功能-后端

    这部分就是实现接受请求参数(搜索条件、page和limit主要用于分页)。
    这里最想记录的就是return $res。之前都是用echo 打印出来一个JSON字符串,不知道为啥一直echo就不会报错,如果return一个字符串则需要JSON.parse()将字符串解析成数组后用layui的parseData去解析成标准格式。这里我直接return一个JSON的关联数组也没问题。

     public function pay_reload()
     {
         $request=Request::instance();
         if($request->isAjax()){
             $page=$_GET['page'];
             $limit=$_GET['limit'];
             $start=($page-1)*$limit;
             $status=$request->get('status');
             $user=new MeetingRegister();
             $res['code'] = 0;
             $res['msg'] = "";
             $res['count'] = $user->getResearchCount($status);
             $res['data'] =  $user->getResearch($status,$page,$start);
             return $res;
         }
     }
    

    一键发送功能-JS部分

      // 监听头部工具栏
      table.on('toolbar(demo)', function(obj){
          var checkStatus = table.checkStatus(obj.config.id);//获取表格唯一id值
          switch(obj.event){
              case 'send_key':
                  var data = checkStatus.data;
                  for(var i=0;i<data.length;i++){ 
                      console.log(data);
                      $.ajax({
                          url:"{:url('EmailManagement/send_key')}",
                          method: "POST",
                          data:{
                              email_address:data[i].email,
                              name:data[i].name,
                              pay_state:data[i].if_pay
                          },
                          success:function (msg) {
                              console.log(msg);
                              if(msg=='success'){
                                  layer.closeAll('loading');
                                  layer.load(2);
                                  layer.msg('邮件发送成功!',{
                                      icon:6
                                  });
                                  setTimeout(function () {
                                      layer.closeAll();//关闭所有的弹出层
                                  }, 1000);
                              }else{
                                  layer.msg('邮件发送失败',{icon:5});
                              }
                          }
                      })
                  }
                  break;
    
              //自定义头工具栏右侧图标 - 提示
              case 'LAYTABLE_TIPS':
                  layer.alert('这是工具栏右侧自定义的一个图标按钮');
                  break;
          };
    
      });
    

    var data = checkStatus.data;是复选框选中行组成的数组,data.length是复选框选中行组成的数组的长度。for循环是按照左侧复选框的选定的个数进行一键发送。一键发送实际上就是循环的过程。

    总结

    这篇记录的重点就是利用头工具栏监听复选框所在行,对选定的内容进行一键发送。

    展开全文
  • PHP+MySQL用户注册发送邮件激活账号实例,样式用的layui,简洁美观。 1.注册发送邮件激活账号,同时检测邮箱是否已注册。 2.检测邮箱是否存在,当邮箱存在时判断是否激活,若未激活,则更改激活码和注册时间。邮箱不...

    PHP+MySQL用户注册发送邮件激活账号实例,样式用的layui,简洁美观。
    1.注册发送邮件激活账号,同时检测邮箱是否已注册。
    2.检测邮箱是否存在,当邮箱存在时判断是否激活,若未激活,则更改激活码和注册时间。邮箱不存在时则发送激活邮件。

    邮件配置及注释:

    $smtpserver = "smtp.exmail.qq.com"; //SMTP服务器 
    $smtpserverport = 25; //SMTP服务器端口 
    $smtpusermail = "ruxi@faofao.cn"; //SMTP服务器的用户邮箱 
    $smtpuser = "ruxi@faofao.cn"; //SMTP服务器的用户帐号 
    $smtppass = "*********"; //SMTP服务器的授权码 
    $smtp = new Smtp($smtpserver, $smtpserverport, true, $smtpuser, $smtppass); //实例化邮件类    
    $emailtype = "HTML"; //信件类型,文本:text;网页:HTML 
    $smtpemailto = $email; 
    $smtpemailfrom = $smtpusermail; 
    $emailsubject = "用户帐号激活"; 
    $emailbody = "    "; 
     $rs = $smtp->sendmail($smtpemailto, $smtpemailfrom, $emailsubject, $emailbody, $emailtype);

    注册验证:

    if($num>=1){ 
        //大于一条记录则存在 
        $jihuo = mysql_query("select * from fao_user where fao_email='$email'"); 
        if($row = mysql_fetch_array($jihuo)){ 
            $upstatus=$row['fao_status']; 
            $upid=$row['fao_id']; 
            } 
     
        if($upstatus==0){ 
                //激活状态为0,表示未激活 
                $updata = mysql_query("UPDATE fao_user SET fao_regtime='$regtime',fao_token='$token',fao_token_exptime='$token_exptime' WHERE fao_id='$upid'"); 
                $retval = mysqli_query($updata); 
                if(! $retval ){ 
                      include_once("email.php"); 
                      }else{ 
                          ?><script type="text/javascript">alert("注册失败,请提交错误,稍后尝试!请及时登录邮箱激活您的帐号!");window.history.go(-1);</script><? 
                        } 
     
                    }else{ 
                     
                        ?><script type="text/javascript">alert("邮箱已被注册,请更换其他的邮箱账号!");window.history.go(-1);</script><? 
     
                    } 
                    exit; 
                    }

    激活验证:

    <? 
     
        }else{ 
        mysql_query("update fao_user set fao_status=1 where fao_id=".$row['fao_id']); 
        if(mysql_affected_rows($conn)!=1) die(0); 
        //        $msg = '激活成功!'; 
                ?><script type="text/javascript">alert("您的激活有效期已过,请重新注册您的帐号发送激活邮件!");</script><? 
        } 
        }else{ 
            ?><script type="text/javascript">alert("激活成功!正在跳转到登录页!");</script>if($row){ 
        if($nowtime>$row['fao_token_exptime']){ //30min 
            ?><script type="text/javascript">alert("链接已失效!");</script><? 
        }

    本实例下载:https://www.sucaihuo.com/php/2436.html

    展开全文
  • Java发送电子邮件(使用mail.jar和activation.jar)

    万次阅读 热门讨论 2017-02-23 17:31:56
    本文参考使用技术Java+JSP+Servlet ...一、J2EE+前台Bootstrap实现发送邮件 二、Java代码发送邮件 三、SpringMVC架构+前台layUI改造邮件发送项目   J2EE+前台Bootstrap实现发送邮件 (1)需求场景...
  • django+bootstrap、layui+mysql 简单的web项目,适合新手!当初我也是为了学习django才做的这个系统,一方面是为了方便计算自己每周加了多少小时班,一方面是练习django。
  • java 邮件发送功能

    2019-02-19 23:11:52
    今天实现了邮件发送功能,实现该功能的目的是后续将实现邮箱验证 首先定义一个html,进行邮箱的获取 &lt;div class="layui-form-item"&gt; &lt;label for="L_email" class="...
  • ssm+layui 超市管理系统 大学期末作业详解 ssm整合ssm-王雪亮跟着这老哥写就完事了 ...mail发送邮件 RandomString随机字符串用来做验证码 全局文件(我也不知道该叫撒,就这么叫吧) mybati...
  • 如果你发现了一个安全漏洞,请发送邮件到 1175401194@qq.com。所有的安全漏洞都将及时得到解决。 项目初衷 根据多年的研发经验,为了提交项目的研发效率,整理自己所掌握的技术,并随着技术...
  • 通过thinkPHP框架通过邮箱找到数据库的密码并发送邮件告知用户; 1:登录html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-...
  • 定时发送电子邮件提醒用户图书借阅超时功能。 可以直接访问系统demo,访问系统。查看效果。 在文章底部含有资源下载链接。 demo链接 图书管理系统demo演示链接 用户名:admin 密码:123456 系统图片 系统主页 ...
  • 如果你发现了一个安全漏洞,请发送邮件到 1175401194@qq.com。所有的安全漏洞都将及时得到解决。 项目初衷 根据多年的研发经验,为了提交项目的研发效率,整理自己所掌握的技术,并随着技术掌...
  • FunAdmin V1.0 基于最新版本的ThinkPHP 6.0.8 框架开发...权限系统、会员系统、管理员日志、内容管理、栏目管理、数据库备份恢复、模板管理、文件管理、短信发送邮件发送等想你所想,也许是最适合学习和应用的系统。
  • java开发oa办公系统源码 Active4j-Boot是基于SpingBoot2.0轻量级的java快速开发框架。...并内置了文件上传下载、导入导出、微信支付、支付宝支付、短信功能、邮件发送等常用工具,整合了layui前端常用组件
  • java开发oa办公系统源码 Active4j-Boot是基于SpingBoot2.0轻量级的java快速开发框架。...并内置了文件上传下载、导入导出、微信支付、支付宝支付、短信功能、邮件发送等常用工具,整合了layui前端常用组件
  • Active4j目前内置了部门管理、用户管理、角色管理、菜单管理、数据数据字典、定时任务、常用系统监控等基础功能,并内置了文件上传下载、导入导出、短信功能、邮件发送等常用工具,整合了layui前端常用组件。...
  • Active4j目前内置了部门管理、用户管理、角色管理、菜单管理、数据数据字典、定时任务、常用系统监控等基础功能,并内置了文件上传下载、导入导出、短信功能、邮件发送等常用工具,整合了layui前端常用组件。...
  • 发送本周的加班时长到邮件中。 个性化倒计时 二、用到的技术 后端:python+django 前端:bootstrap和layui,jquery,ajax等 数据库:mysql 三、截图 注册界面: 登陆界面: 主界面: 修改倒计时 四、功能介绍
  • shop 毕业设计 Dreamfly手机商城(小米商城) h5...后端包含Mysql数据库的连接、查询以及Jsonp的处理、发送邮件短信、数据加密解密等。 声明 本项目所有商品图片信息等,均采集自小米商城,仅供项目设置展示,学习研究!
  • Active4j-Boot目前内置了部门管理、用户管理、角色管理、菜单管理、数据数据字典、定时任务、常用系统监控等基础功能,并内置了文件上传下载、导入导出、微信支付、支付宝支付、短信功能、邮件发送等常用工具...
  • 橙悦OA办公系统

    2021-04-23 22:56:12
    基于现有的微服务架构实现, 内置了部门管理、用户管理、角色管理、菜单管理、数据数据字典、定时任务、常用系统监控等基础功能,并内置了文件上传下载、导入导出、短信功能、邮件发送等常用工具,整合了layui前端...
  • Active4j目前内置了部门管理、用户管理、角色管理、菜单管理、数据数据字典、定时任务、常用系统监控等基础功能,并内置了文件上传下载、导入导出、短信功能、邮件发送等常用工具,整合了layui前端常用组件。...

空空如也

空空如也

1 2
收藏数 37
精华内容 14
关键字:

layui发送邮件