由于许多css的内容还没有学，html部分也只学了一点皮毛，所以对应部分的代码写的不是很简练。
主要是记录下从本地读取图片并显示的方法。
算是第一个自主实现的JavaWeb的小东西了，记录一下。
<%--
Created by IntelliJ IDEA.
User: zhangkanqi
Date: 2019/10/29
Time: 10:26 PM
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<style>
input{
border: 0px;
outline:none;
height: 50px;
text-align: center;
font-size: 16px; font-family: "Microsoft YaHei";
}
textarea{
border:0px;
outline:none;
text-align: left;
font-size: 16px; font-family: "Microsoft YaHei";
}
table{
border-color: black;
border-collapse: collapse;
text-align: center;
}
tr{
border: 0px;
}
td{
text-align: center;
}
pre{
font-size: 16px; font-family: "Microsoft YaHei";
}
form img {
height: 140px;
width: 100px;
}
label{
background-color: gainsboro;
padding: 5px 10px;
border-radius: 5px;
border: 1px ridge black;
font-size: 0.8rem;
height: auto;
}
label.pos_abs{
position:absolute;
left: 865px;
top: 225px;
}
</style>
<title>个人简历</title>
</head>
<body>
<form action="" method="post">
<h3 align="center">计算机科学与技术系172班 ****** 个人简介</h3>
<table border="1" align="center" rules=none cellspacing=0 >
<tr>
<td border="0">
<table border="1">
<tr>
<td width="100" height="50">姓名</td>
<td height="50"><input type="text" name="name" style="width: 100px" value="小丸子"></td>
<td width="100" height="50">性别</td>
<td height="50"><input type="text" name="sex" style="width: 100px" value="女"></td>
<td width="100" height="50">出生年月</td>
<td height="50"><input type="text" name="birthday" style="width: 100px" value="1998/10/15"></td>
<td rowspan="4" colspan="1" width="50">
<div class="preview">
<p>未上传证件照...</p>
</div>
<div>
<label class="pos_abs" for="uploadPhoto" style="">上传证件照</label>
<input type="file" style="width: 107px" id="uploadPhoto" class="uploadPhoto" name="photo" accept=".jpg, .jpeg, .png" style="opacity: 0">
</div>
</td>
</tr>
<tr>
<td width="100" height="50">民族</td>
<td height="50"><input type="text" name="nation" style="width: 100px" value="汉"></td>
<td width="100" height="50">政治面貌</td>
<td height="50"><input type="text" name="politicsStatus" style="width: 100px" value="共青团员"></td>
<td width="100" height="50">身高</td>
<td height="50"><input type="text" name="height" style="width: 100px" value="1xxcm"></td>
</tr>
<tr>
<td width="100" height="50">学制</td>
<td height="50"><input type="text" name="lengthOfSchooling" style="width: 100px" value="4"></td>
<td width="100" height="50">学历</td>
<td height="50"><input type="text" name="educationBackground" style="width: 100px" value="本科"></td>
<td width="100" height="50">户籍</td>
<td height="50"><input type="text" name="censusRegister" style="width: 100px" value="安徽"></td>
</tr>
<tr>
<td width="100" height="50">专业</td>
<td height="50"><input type="text" name="major" style="width: 100px" value="CS"></td>
<td width="160" height="50" colspan="2">毕业学校</td>
<td height="50" colspan="2"><input type="text" name="graduateSchool" width="300" value="南昌大学"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="729" height="50">
<b>技能、特长或爱好</b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="100" height="50">外语等级</td>
<td height="50" colspan="2" width="205"><input type="text" name="foreignLanguageLevel" style="width: 200px" value="六级"></td>
<td width="100" height="50">计算机</td>
<td height="50" colspan="3" width="315"><input type="text" name="computer" width="309" style="width: 300px" value="满级" ></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="729" height="50">
<b><pre>个 人 履 历</pre></b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="100" height="50">时 间</td>
<td width="201" height="50" colspan="2">单位</td>
<td width="412" height="50">经 历</td>
</tr>
<tr>
<td align="center" width="100" height="50">20<input type="text" name=time1Year" style="width: 18px" maxlength="2">年<input type="text" name=time1Month" style="width: 18px" maxlength="2">月</td>
<td colspan="2" width="201"><input type="text" name="time1Unit" width="201"></td>
<td colspan="3" width="416"><input type="text" name="time1Experience" style="width: 400px"></td>
</tr>
<tr>
<td align="center" width="100" height="50">20<input type="text" name=time2Year" style="width: 18px" maxlength="2">年<input type="text" name=time2Month" style="width: 18px" maxlength="2">月</td>
<td colspan="2" width="201"><input type="text" name="time2Unit" width="201"></td>
<td colspan="3" width="416"><input type="text" name="time2Experience" style="width: 400px" value="上学"></td>
</tr>
<tr>
<td align="center" width="100" height="50">20<input type="text" name=time3Year" style="width: 18px" maxlength="2">年<input type="text" name=time3Month" style="width: 18px" maxlength="2">月</td>
<td colspan="2" width="201"><input type="text" name="time3Unit" width="201"></td>
<td colspan="3" width="416"><input type="text" name="time3Experience" style="width: 400px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="729" height="50">
<b><pre>联 系 方 式</pre></b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="100" height="50">通讯地址</td>
<td colspan="3" width="305"><input type="text" name="address" style="width: 300px" value="中国南昌"></td>
<td width="100" height="50">联系电话</td>
<td colspan="2" width="215"><input type="text" name="phoneNumber" style="width: 200px" value="11001001010"></td>
</tr>
<tr>
<td width="100" height="50">E-mail</td>
<td colspan="3" width="305"><input type="text" name="e-mail" style="width: 300px" value="zhang131@qq.com"></td>
<td width="100" height="50"><pre>邮 编</pre></td>
<td colspan="2" width="215"><input type="text" name="postcode" style="width: 200px" value="031500"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="729" height="50">
<b><pre>自 我 评 价</pre></b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="729" height="50"><textarea name="selfAssessment" cols="76" rows="6"></textarea></td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<center><input type="submit" value="提交简历" ></center>
</form>
<script>
var input = document.querySelector('#uploadPhoto');
var preview = document.querySelector('.preview');<!--获取第一个元素-->
input.style.opacity = 0;
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay() {
while(preview.firstChild) {
preview.removeChild(preview.firstChild);
}
var curFiles = input.files;
if(curFiles.length === 0) {
var para = document.createElement('p');
para.textContent = 'No files currently selected for upload';
preview.appendChild(para);
} else {
var list = document.createElement('dl');
preview.appendChild(list);
for(var i = 0; i < curFiles.length; i++) {//curFiles[i].name
var listItem = document.createEleme***ar image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
listItem.appendChild(image);//图片
list.appendChild(listItem);
}
}
}
</script>
</body>
</html> 效果：（表格做的有点大）
京公网安备 11010502036488号