HTML 代码
<form id="ajaxForm" method="POST" >
<span>1、摘要</sapn><br>
<span style="margin-left: 25px">总测试点数:<span class="value1">from tdms</span> </span><span style='margin-left:20px;'>当日完成测试点数:<span class="value2">from tdms</span> </span><span style='margin-left:20px;'>累计完成测试点数:<span class="value3">from tdms</span> </span><br>
<span>2、测试点执行进度</sapn><br>
<table id="SDVForm1" border='1' style="margin-left:25px; margin-top:10px;border-collapse: collapse; border: none; word-wrap:break-word;white-space:normal;">
<tr>
<th>·测试情况</th>
<th>Pass</th>
<th>Failed</th>
<th>Blocked</th>
<th>完成率</th>
</tr>
<tr style="height:100px;">
<td><span style="font-weight: bold">·</span>当日测试情况</td>
<td><span class="value4">From tdms</span></td>
<td><span class="value5">From tdms</span></td>
<td><span class="value6">From tdms</span></td>
<td>自动计算:<br><span class="value7">当日完成测试点数/总测试点数 * 100%</span></td>
</tr>
<tr style="height:40px;">
<td><span style="font-weight: bold">·</span>当日百分比</td>
<td><span class="value8">B2/当日完成测试点数*100%</span></td>
<td><span class="value9">B3/当日完成测试点数*100%</span></td>
<td><span class="value10">B4/当日完成测试点数*100%</span></td>
<td></td>
</tr>
<tr style="height:100px;">
<td><span style="font-weight: bold">·</span>累计测试情况</td>
<td><span class="value11">From tdms</span></td>
<td><span class="value12">From tdms</span></td>
<td><span class="value13">From tdms</span></td>
<td>自动计算:<br><span class="value14">累计完成测试点数/总测试点数 * 100%</span></td>
</tr>
<tr style="height:40px;">
<td><span style="font-weight: bold">·</span>累计百分比</td>
<td><span class="value15">D2/累计完成测试点数*100%</span></td>
<td><span class="value16">D3/累计完成测试点数*100%</span></td>
<td><span class="value17">D4/累计完成测试点数*100%</span></td>
<td></td>
</tr>
</table>
<div class="text" style="margin-top:10px;margin-bottom:10px;width: 600px;">
<span>3、问题单回归进度</sapn> <input id="value18" class="easyui-textbox" style="width:300px">
</div>
<div class="text" style="margin-top:10px;margin-bottom:10px;width: 600px;">
<span>4、问题统计</sapn> <input id="value19" class="easyui-textbox" style="width:300px">
</div>
<div class="text" style="margin-top:10px;margin-bottom:10px;width: 600px;">
<span>5、明日计划</sapn> <input id="value20" class="easyui-textbox" style="width:300px">
</div>
<div class="text" style="margin-top:10px;margin-bottom:10px;width: 600px;">
<span>6、风险和问题</sapn> <input id="value21" class="easyui-textbox" style="width:300px">
</div>
<div class="text" style="margin-top:10px;margin-bottom:10px;width: 600px;">
<span>7、问题列表</sapn> <input id="value22" class="easyui-textbox" style="width:300px">
</div>
<div class="text" style="margin-top:10px;margin-bottom:10px;width: 600px;">
<span style="margin-left: 25px;">附件</span>
<input type="file" id="file" buttonText="上传" style="left: 20px; width: 100px;">
</div>
<input style="margin-left: 45%;" class="easyui-linkbutton" value="发送" id="submitBtn" onclick="sendMail()"/> <!-- onclick="sendMail()" class="easyui-linkbutton" -->
</form>
JavaScript代码
function sendMail(){
var formData = new FormData();
//要上传的附件
formData.append("file", document.getElementById('file').files[0]);
//其他参数
formData.append("value1",$(".value1").text());
formData.append("value2",$(".value2").text());
formData.append("value3",$(".value3").text());
formData.append("value4",$(".value4").text());
formData.append("value5",$(".value5").text());
formData.append("value6",$(".value6").text());
formData.append("value7",$(".value7").text());
formData.append("value8",$(".value8").text());
formData.append("value9",$(".value9").text());
formData.append("value10",$(".value10").text());
formData.append("value11",$(".value11").text());
formData.append("value12",$(".value12").text());
formData.append("value13",$(".value13").text());
formData.append("value14",$(".value14").text());
formData.append("value15",$(".value15").text());
formData.append("value16",$(".value16").text());
formData.append("value17",$(".value17").text());
formData.append("value18",$("#value18").val());
formData.append("value19",$("#value19").val());
formData.append("value20",$("#value20").val());
formData.append("value21",$("#value21").val());
formData.append("value22",$("#value22").val());
$.ajax({
url:"SDVSendMail.action",
type:"post",
data:formData,
processData : false,
contentType : false,
success:function(data){
alert(data);
}
});
}
Servlet 代码 (使用了一部分别人的代码)
@Override
protected String doService(final HttpServletRequest req, final HttpServletResponse resp, final String projectId) throws IOException, ServletException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if(!isMultipart){
throw new RuntimeException("请检查您的表单的enctype属性,确定是multipart/form-data");
}
DiskFileItemFactory dfif = new DiskFileItemFactory();
ServletFileUpload parser = new ServletFileUpload(dfif);
parser.setFileSizeMax(3*1024*1024);//设置单个文件上传的大小
List<FileItem> items = null;
try {
items = (List) parser.parseRequest(request);
}catch(FileUploadBase.FileSizeLimitExceededException e) {
out.write("上传文件超出了3M");
return "";
}catch (FileUploadException e) {
e.printStackTrace();
throw new RuntimeException("解析上传内容失败,请重新试一下");
}
Map map = new HashMap<>();
Map nameAndPath = new HashMap<>();
List files = new ArrayList<>();
//处理请求内容
if(items!=null){
for(FileItem item:items){
if(item.isFormField()){
//将传过来的参数存入map
map.put(item.getFieldName(), item.getString("UTF-8"));
}else{
nameAndPath = processUploadField(item);
}
}
}
List list = new ArrayList();
list.add(0,"next_gx@163.com");
StringBuilder content1 = new StringBuilder("<html><head><style type='text/css'>td{border:solid #000 1px;} body,td,th{font-size:12px;}</style></head><body>");
content1.append("<span>1、摘要</sapn><br>");
content1.append("<span>总测试点数:"+map.get("value1")+" </span><span style='margin-left:20px;'>当日完成测试点数 "+map.get("value2")+" </span><span style='margin-left:20px;'>累计完成测试点数:"+map.get("value3")+" </span><br>");
content1.append("<span>2、测试点执行进度</sapn><br>");
content1.append("<table border='1' style='border-collapse:collapse;border:none;width:600px;'>");
content1.append("<tr><th>测试情况</th><th>Pass</th><th>Failed</th><th>Blocked</th><th>完成率</th></tr>");
content1.append("<tr><td>" + "当日测试情况" + "</td>");
content1.append("<td>" + map.get("value4") + "</td>");
content1.append("<td>" + map.get("value5") + "</td>");
content1.append("<td>" + map.get("value6") + "</td>");
content1.append("<td>" + map.get("value7") + "</td></tr>");
content1.append("<tr><td>" + "当日百分比" + "</td>");
content1.append("<td>" + map.get("value8") + "</td>");
content1.append("<td>" + map.get("value9") + "</td>");
content1.append("<td>" + map.get("value10") + "</td><td></td></tr>");
content1.append("<tr><td>" + "累计测试情况" + "</td>");
content1.append("<td>" + map.get("value11") + "</td>");
content1.append("<td>" + map.get("value12") + "</td>");
content1.append("<td>" + map.get("value13") + "</td>");
content1.append("<td>" + map.get("value14") + "</td></tr>");
content1.append("<tr><td>" + "累计百分比" + "</td>");
content1.append("<td>" + map.get("value15") + "</td>");
content1.append("<td>" + map.get("value16") + "</td>");
content1.append("<td>" + map.get("value17") + "</td><td></td></tr>");
content1.append("</table>");
content1.append("<span>3、问题单回归进度</sapn> <span style='margin-left:20px;'>"+map.get("value18")+"</span><br>");
content1.append("<span>4、问题统计</sapn> <span style='margin-left:50px;'>"+map.get("value19")+"</span><br>");
content1.append("<span>5、明日计划</sapn> <span style='margin-left:50px;'>"+map.get("value20")+"</span><br>");
content1.append("<span>6、风险和问题</sapn> <span style='margin-left:35px;'>"+map.get("value21")+"</span><br>");
content1.append("<span>7、问题列表</sapn> <span style='margin-left:50px;'>"+map.get("value22")+"</span><br>");
content1.append("</body></html>");
emailService.sendKEmail("title", content1.toString(), list, null, nameAndPath);
try {
out = resp.getWriter();
out.write("success");
} catch (IOException e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
return null;
}
private Map processUploadField(FileItem item) {
try {
Map map = new HashMap<>();
String fileName = item.getName();
String uuidFileName = "";
if (fileName != null && !fileName.equals("")) {
uuidFileName = UUID.randomUUID().toString() + "_" + FilenameUtils.getName(fileName);
// 扩展名
String extension = FilenameUtils.getExtension(uuidFileName);
// MIME类型
String contentType = item.getContentType();
String childDirectory = makeChildDirectory(getServletContext().getRealPath("/WEB-INF/files/"),uuidFileName);
String storeDirectoryPath = getServletContext().getRealPath("/WEB-INF/files/" + childDirectory);
File storeDirectory = new File(storeDirectoryPath);
if (!storeDirectory.exists()) {
storeDirectory.mkdirs();
}
item.write(new File(storeDirectoryPath + File.separator + uuidFileName));// 删除临时文件
map.put("fileName", fileName);
map.put("path", storeDirectoryPath+ File.separator +uuidFileName);
return map;
}
} catch (Exception e) {
throw new RuntimeException("上传失败,请重试");
}
return null;
}
//存放的子目录
private String makeChildDirectory(String realPath, String fileName) {
Date now=new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMdd");
String directory = dateFormat.format(now);
File file = new File(realPath, directory);
if (!file.exists())
file.mkdirs();
return directory;
}
JavaMail 代码
private boolean sendKeerqinEmail(String title, String htmlContent, List<String> to, List<String> cc,Map nameAndPath) {
try {
logger.info(title + " Email send begin!");
MimeMessage message = new MimeMessage(session);
// 发件人
InternetAddress from = new InternetAddress(properties.getProperty("sendNo"));
message.setFrom(from);
// 收件人(多个)
InternetAddress[] toAddress = new InternetAddress[to.size()];
for (int i = 0; i < to.size(); i++) {
toAddress[i] = new InternetAddress(to.get(i));
}
message.setRecipients(MimeMessage.RecipientType.TO, toAddress);
// 抄送人(多个)
if (cc != null && cc.size() > 0) {
InternetAddress[] ccAddress = new InternetAddress[cc.size()];
for (int i = 0; i < cc.size(); i++) {
ccAddress[i] = new InternetAddress(cc.get(i));
}
message.setRecipients(MimeMessage.RecipientType.CC, ccAddress);
}
MimeBodyPart text = new MimeBodyPart();
text.setContent(htmlContent.toString(), "text/html;charset=UTF-8");
MimeMultipart mp1 = new MimeMultipart();
mp1.addBodyPart(text);
mp1.setSubType("related");
MimeBodyPart attach = new MimeBodyPart();
DataHandler dh = new DataHandler(new FileDataSource(nameAndPath.get("path").toString()));
attach.setDataHandler(dh);
attach.setFileName(MimeUtility.encodeWord(nameAndPath.get("fileName").toString()));
MimeMultipart mp2 = new MimeMultipart();
mp2.addBodyPart(attach);
MimeBodyPart content1 = new MimeBodyPart();
content1.setContent(mp1);
mp2.addBodyPart(content1);
mp2.setSubType("mixed");
message.setContent(mp2);
// 邮件主题
message.setSubject(title);
// 设置邮件消息发送的时间
message.setSentDate(new Date());
// 保存邮件
message.saveChanges();
// 发送邮件
Transport.send(message, message.getAllRecipients());
logger.info(title + " Email send success!");
} catch (Exception e) {
logger.error(e.getMessage(), e);
}
return true;
}
前端截图
点击发送后收到的邮件 截图
这样就实现了异步提交表单,发送邮件的功能。最费时间的地方是异步提交表单,以前不知道表单也可以异步提交。异步提交的好处是页面不用刷新,也可以执行回调函数,让用户感知邮件发送是否成功。