【JavaWeb】网页填写个人简历并显示上传的头像 |
您所在的位置：网站首页 › 个人简历截图图片 › 【JavaWeb】网页填写个人简历并显示上传的头像 |
【JavaWeb】网页填写个人简历并显示上传的头像
|
由于许多css的内容还没有学，html部分也只学了一点皮毛，所以对应部分的代码写的不是很简练。 主要是记录下从本地读取图片并显示的方法。 算是第一个自主实现的JavaWeb的小东西了，记录一下。 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; } 个人简历 计算机科学与技术系172班 ****** 个人简介 姓名 性别 出生年月未上传证件照... 上传证件照 民族 政治面貌 身高 学制 学历 户籍 专业 毕业学校 技能、特长或爱好 外语等级 计算机 个 人 履 历 时 间 单位 经 历 20月 20月 20月 联 系 方 式 通讯地址 联系电话 E-mail 邮 编 自 我 评 价 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); } } }效果：（表格做的有点大）
|
【本文地址】
今日新闻 |
推荐新闻 |