通过给出指定值来通过php完成邮件发送任务,可以发送html内容,核心代码其实是php。index.html 只是测试所用,使用 bootstrap 来简单美化下样式,使用 wangEditor 强化能发送的邮件格式,使用 jquery 让代码逻辑更清晰
https://yuanqiao.pw/static/demo/sendmail/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>php 使用 SMTP 邮件服务器发送邮件</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.modal-header {
display: block;
}
</style>
</head>
<body>
<form id="senMail">
<div class="modal-header">
<div class="form-row">
<div class="form-group col-md-3">
<label for="mailserver">smtp服务器</label>
<input type="text" class="form-control" id="mailserver" name="mailserver" placeholder="请输入 smtp 服务器" value="smtp.163.com" required>
</div>
<div class="form-group col-md-3">
<label for="name">smtp端口</label>
<input type="text" class="form-control" id="port" name="port" placeholder="请输入 smtp 端口" value="25" required>
</div>
<div class="form-group col-md-3">
<label for="name">发件人邮箱</label>
<input type="email" class="form-control" id="mailuser" name="mailuser" placeholder="请输入 smtp 服务器" required>
</div>
<div class="form-group col-md-3">
<label for="name">发信邮箱授权码</label>
<input type="text" class="form-control" id="mailpass" name="mailpass" placeholder="请输入发信邮箱授权码" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="subject">标题</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="请输入标题" required>
</div>
<div class="form-group col-md-6">
<label for="mailto">收件人邮箱</label>
<input type="email" class="form-control" id="mailto" name="mailto" placeholder="请输入收件人邮箱" required>
</div>
</div>
</div>
<div class="modal-body" id="content" name="content"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js"></script>
<script>
$(document).ready(function() {
// 富文本编辑器
var E = window.wangEditor
var editor = new E('#content')
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
editor.create();
/**
* [点击发送邮件]
*/
$('#senMail').submit(function(event) {
event.preventDefault();
//Ajax POST发送
$.ajax({
type: 'post',
url: '/static/demo/sendmail/send.php',
data: {
mailserver: $('#mailserver').val(),
port: $('#port').val(),
mailuser: $('#mailuser').val(),
mailpass: $('#mailpass').val(),
mailto: $('#mailto').val(),
subject: $('#subject').val(),
content: editor.txt.html()
},
dataType: "json",
success: function(res) {
console.log(res);
if(res.status === 'success') {
alert('邮件发送成功!');
}
},
error: function() {
console.log('请求失败');
}
})
})
});
</script>
</body>
</html>
<?php
header("Content-type:text/html;charset=utf-8");
require_once './src/PHPMailer.php';
set_time_limit(60);
$mailserver = $_POST['mailserver'];
$port = $_POST['port'];
$mailuser = $_POST['mailuser'];
$mailpass = $_POST['mailpass'];
$mailto = $_POST['mailto'];
$subject = $_POST['subject']; // 邮件标题
$body = $_POST['content']; // 邮件正文
//构建邮件
$mail=array(
"subject"=>$subject,
"body"=>array(
'content'=>$body,
)
);
// print_r("<pre/>");
$test=new SendMaill($mailserver, $port, $mailuser, $mailpass, false, false);
if($test->sendMail($mailto, $mail, true)){
echo json_encode(array('status' => 'success', 'message' => '邮件发送成功'), true);
die();
}else {
echo json_encode(array('status' => 'error', 'message' => '邮件发送成功'), true);
die();
}
?>