由於許多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="[email protected]"></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.createElement('dt');
var image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
listItem.appendChild(image);//圖片
list.appendChild(listItem);
}
}
}
</script>
</body>
</html>
效果：（表格做的有點大）
