tp+javascript 输入框/绑定邮箱

添加数据库 and 绑定邮箱！！！

public function send(){
        header('Content-type:application/json;charset=utf-8');

        $cont = "Name：{$_POST['name']} \n\r";
        $cont .= "Tel：{$_POST['tel']} \n\r";
        $cont .= "Eamil：{$_POST['email']} \n\r";
        $cont .= "Information：{$_POST['information']} \n\r";
        $cont .= "Remarks：{$_POST['remarks']} \n\r";

        $res = think_send_mail('3136967582@qq.com', '您有新消息', '您有新消息', $cont);

        $name = I('name');
        $email = I('email');
        $tel = I('tel');
        $information = I('information');
        $remarks = I('remarks');

      $info =  M('message')->add([
           'user_name' =>  $name ,
           'email' => $email,
           'telphone' =>  $tel,
           'ip' => get_client_ip(),
           'content' => $information,
           'remarks' => $remarks,
           'create_time' => NOW_TIME
       ]);

       $this->jsonEncode(array('msg' => 'Submit successfully,We will contact you!', 'code' => '1', 'userinfo' => json_encode($info)));
}

 

 

<form action="" method="POST" role="form" id="form">
        <!-- <legend>Cooperation Intent Form</legend> -->
        <div class="form-one">
            <div class="form-group">
                <input type="text" class="form-control" id="name" name="name" placeholder="Name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="tel" name="tel" placeholder="Tel">
            </div>
        </div>
        <div class="form-one">
            <div class="form-group">
                <input type="text" class="form-control" id="email" name="email" placeholder="Email">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="information" name="information" placeholder="Other contact information">
            </div>
        </div>

        <textarea name="remarks" id="remarks" class="form-control" rows="3" required="required" placeholder="Remarks"></textarea>

        <button type="submit" class="btn btn-primary send">Sumbit</button>
    </form>

<script>
    $('.send').click(function () {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: '/index/send',
            data: $('#form').serialize(),
            success: function (data) {
                if(data.code==1){
                    window.location.reload();
                }

            },

            // error: function (data) {
            //     alert("error:" + data.responseText);
            
            // }

        });
    })
</script>

 

实现效果：

 

 

数据库设计：

CREATE TABLE `o_my_resume` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL COMMENT '姓名',
  `job` text NOT NULL COMMENT '申请的岗位',
  `tel` varchar(255) NOT NULL COMMENT '手机号码',
  `ip` varchar(255) NOT NULL COMMENT 'IP',
  `addr` text NOT NULL COMMENT '地址',
  `file_id` text NOT NULL COMMENT '简历文件的ID',
  `status` tinyint(1) DEFAULT '1',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '申请日期',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=138 DEFAULT CHARSET=utf8 COMMENT='用户提交的简历';

前端页面：

<div class="job-apply-dialog">
    <div class="job-apply-dialog-inner">
        <div class="close"><i class="iconfont icon-close"></i></div>
        <div class="job-apply-dialog-header">
            <h3>填写简历</h3>
        </div>
        <div class="job-apply-dialog-body">
                <form id="form" method="post" role="form" class="job-apply-dialog-form" enctype="multipart/form-data">
                <div>
                    <label for="job">申请职位：</label>
                    <select name="job" id="job">
                        <volist name="jobs" id="job">
                            <option value="{$job.name}">{$job.name}</option>
                        </volist>
                    </select>
                </div>
                <div class="form-group ly-group">
                    <label for="">姓名：</label>
                    <input type="text" id="name" name="name"  placeholder="请输入姓名">
                </div>
                <div class="form-group ly-group">
                    <label for="">手机号码：</label>
                    <input type="text" id="tel" name="tel"  placeholder="请输入手机号码">
                </div>
                <div class="form-group ly-group">
                    <label for="">地址：</label>
                    <input type="text" id="addr" name="addr" required placeholder="请输入地址">
                </div>
                <div class="form-group ly-group">
                    <label for="">简历：<span class="tip">（请选择 PDF 或 Word，文件小于 5
                            MB）</span></label>
                    <input type="file" id="file" name="file" accept=".pdf, .doc, .docx" required>
                </div>
                <div class="form-group ly-group">
                    <label for="verify">验证码：<span class="tip">（如果验证码看不清，点击图片刷新）</span></label>
                    <div class="verify-block">
                        <input type="text" id="verify" name="verify" required size="4" minlength="4"
                            maxlength="4" placeholder="请输入4位验证码，不区分大小写">
                        <img class="verifyImage" src="/join/verifyImage" alt="验证码图片" width="220"
                            height="60">
                    </div>
                </div>
                <!-- <div class="submit" >
                    <button>提交简历</button>
                </div> -->
                <button type="submit">提交</button>
            </form>
        </div>
    </div>
</div>

script代码：

  <script>
        $('.job-apply-dialog-form').submit(function (event) {
            event.preventDefault();
            var form = event.target;
            var formData = new FormData(form);
            axios({
                method: "POST",
                // url: "/join/sendmsg",
                url: "/join/submitResume",
                data: formData,
                headers: { "Content-Type": "multipart/form-data" },
            }).then(function (response) {
                if (!response.data.ok) {
                    alert(response.data.error_msg);
                    return;
                } else {
                    $('.job-apply-dialog').removeClass('on');
                    alert(response.data.ok_msg);
                }
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            }).then(function () {
                // 无论如何（提交成功与否）验证码都需要更新
                verifyImageEl.src += '?' + Math.random();
            })
        });

        var verifyImageEl = document.querySelector('.verifyImage');
        verifyImageEl.addEventListener('click', function (event) {
            this.src = this.src + '?' + Math.random();
        });
    </script>

php代码：

 public function submitResume()
    {
        if (!IS_POST) {
            // http_response_code(400);
            $this->show(json_encode(
                ['ok' => false, 'error_msg' => 'Invalid HTTP method, not POST'],
                JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
            ), 'utf-8', 'application/json');
            return;
        }

        $verify = new \Think\Verify();
        if (!$verify->check(I('verify'))) {
            // http_response_code(400);
            $this->show(json_encode(
                ['ok' => false, 'error_msg' => '验证码错误'],
                JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
            ), 'utf-8', 'application/json');
            return;
        }

        $upload = new \Think\Upload();
        $upload->maxSize = 5 * 1024 * 1024;
        $upload->exts = ['pdf', 'doc', 'docs'];
        $upload->rootPath = './Uploads/';
        $upload->savePath = 'Resume/';
        $info = $upload->uploadOne($_FILES['file']);
        if (!$info) {
            // http_response_code(400);
            $upload->getError();
            $this->show(json_encode(
                ['ok' => false, 'error_msg' => $upload->getError()],
                JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
            ), 'utf-8', 'application/json');
            return;
        }



        $cont .= "申请职位：{$_POST['job']} \n\r";
        $cont = "姓名：{$_POST['name']} \n\r";
        $cont .= "电话：{$_POST['tel']} \n\r";
        $cont .= "地址：{$_POST['addr']} \n\r";
        $fileUrl = "./Uploads/{$info['savepath']}/{$info['savename']}";

        $file = array(
            $fileUrl
        );
    

        $res = think_send_mail('3136967582@qq.com', '您有新消息', '您有新消息', $cont,$file);
 

        // "info": {
        //     "name": "688566 吉贝尔 2020-09-08  关于选举职工代表监事的公告.pdf",
        //     "type": "application\/pdf",
        //     "size": 232146,
        //     "key": 0,
        //     "ext": "pdf",
        //     "md5": "8273ac225f90ed815ae089ec5e8687d2",
        //     "sha1": "b278a09a09ebc696a199551ec289a63076084d1e",
        //     "savename": "6156daca6e86c.pdf",
        //     "savepath": "Resume\/2021-10-01\/"
        // }
        $resume_file_id = M('resume_file')->add($info);
        if (!$resume_file_id) {
            $this->show(json_encode(
                ['ok' => false, 'error_msg' => '文件信息保存到数据库resume_file失败！'],
                JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
            ), 'utf-8', 'application/json');
            return;
        }


        // job: 合成研究员 （2名）
        // name: a
        // tel: b
        // addr: c
        $result = M('my_resume')->add([
            'job' => I('job'),
            'name' => I('name'),
            'tel' => I('tel'),
            'ip' => get_client_ip(),
            'addr' => I('addr'),
            'file_id' => $resume_file_id,
        ]);


        
        if (!$result) {
            $this->show(json_encode(
                ['ok' => false, 'error_msg' => '简历信息保存到数据库my_resume失败！'],
                JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
            ), 'utf-8', 'application/json');
            return;
        }
        

        $this->show(json_encode(
            ['ok' => true, 'ok_msg' => '成功提交简历！', 'info' => $info, 'resume_file_id' => $resume_file_id],
            JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
        ), 'utf-8', 'application/json');

    }

最终结果  效果图：

文件存储路径：

 

 

记得要配置SMTP服务器：