【JavaWeb】网页填写个人简历并显示上传的头像

最新推荐文章于 2022-04-09 21:52:52 发布
最新推荐文章于 2022-04-09 21:52:52 发布
阅读量4.5k 收藏 40
点赞数 6
分类专栏： JavaWeb 文章标签： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cassie_zkq/article/details/102828298
版权

由于许多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.createElement('dt');
                var image = document.createElement('img');
                image.src = window.URL.createObjectURL(curFiles[i]);
                listItem.appendChild(image);//图片
                list.appendChild(listItem);
            }
        }
    }
</script>
</body>
</html>

效果：（表格做的有点大）

       

java 表单实现上传图片至服务器_java实现图片上传至服务器
weixin_32632831的博客
02-13 881
实现的思路：工具：MySQL，eclipse首先，在MySQL中创建了两个表，一个t_user表，用来存放用户名，密码等个人信息，一个t_touxiang表，用来存放上传的图片在服务器中的存放路径，以及图片名字和用户ID，T_touxiang表中的用户ID对应了t_user中的id。t_user表SQL：DROP TABLE IF EXISTS `t_user`;CREATE TABLE `t_u...
javaweb个人博客项目实现项目文本jsp+servlet+mysql（内置markdown编辑器）
iceshine的博客
01-29 2978
本文主要讲述了基于javaweb的个人博客的设计和实现过程：主要包括概要设计和主要功能的实现。主要角色大致有用户和管理员，其中跟用户相关的模块包括用户信息模块、评论模块和搜索模块等，跟管理员相关的模块包括登录、用户管理、文章管理、评论管理、用户管理等。在本系统的开发中用到的主要工具是IntelliJ IDEA、Tomcat和MySQL,开发语言为JAVA，主要框架是bootstrap。最后讲了目前系统存在的问题以及进一步优化的方向。
javaweb求职简历
10-28
javaweb javaee java 求职简历，很好的一个java简历模板。希望帮到大家
Java Web实践专题——信息显示
李绪成的一亩三分地
10-23 4116
  经典的显示方法本章主要介绍如果控制页面的输出，如何控制查询结果的显示，不可否认的是Web应用的是很多功能都要显示数据。向用户输出的信息包括静态页面和动态页面：静态页面就是我们编写好的html文件，不包含任何的处理代码，我们不管什么时候访问这些页面效果都是一样的，除非把页面替换了；动态页面也就是包含了动态信息的页面，这些页面在不同的运行时刻或者由不同的人访问结果都可能不一样，也就是说
j2ee个人简历 java web程序员简历
06-02
JAVA软件工程师 java web程序员的个人简历，供毕业生参考
Web简单个人简历
10-23
HTML简单个人简历，Web课设，实测可行，主要由HTML开发。
javaweb图片上传
Miss__wang的博客
05-10 4819
javaweb中文件上传，这个问题困扰了我好久，好在已经解决了，为了帮助像我一样在这个问题中徘徊的朋友，我决定今天将自己的解决办法分享给大家。 在Javaweb中要上传图片，如果需要显示在页面上，那么就要把文件长传到项目的根目录下，如果不需要显示的话可以上传到硬盘上，因为Tomcat服务器只能够显示在根目录下的图片。 首先我们把该功能嵌套在用户注册功能里，上传头像功能。
javaweb--富文本编辑与文件上传
qq_67771954的博客
04-09 436
一、富文本编辑器 概述： 富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器，类似于 Microsoft Word 的编辑功能 常用的富文本编辑器： ckeditor Kindeditor ueditor wangEditor Sma...
基于JavaWeb的兴趣发布平台设计源码
06-22
- 用户可以创建自己的兴趣主题，填写兴趣描述，选择合适的分类，上传相关图片或链接，分享给其他用户。 - 兴趣发布需经过后台审核，确保内容的合规性，避免不良信息的传播。 3. **兴趣查看与浏览**： - 用户可以...
校园二手交易平台：基于JavaWeb的网站系统开发
它允许用户发布新的二手商品信息，包括填写商品名称、描述、价格等，并上传商品图片。同时，用户可以对已发布的商品进行编辑或删除，以更新商品状态或撤销出售。 5. 交易商品板块管理：为了帮助用户更方便地查找和...
javaweb上传图片
03-23
javaweb开发上传图片到服务器以及保存图片路径.
个人简历HTML页面
10-13
一个简单的HTML个人简介网页，在第十七行可以修改背景图片的路径，请按自己的实际情况修改即可，否则将无背景图案。不懂代码请不要随便修改，只需要修改其中的文字即可。会的勿喷。谢谢
javaweb文件上传/图片上传
08-16
文件上传 图片上传 上传
java web上传图片
ydcun知识点积累
06-05 3631
fileUpLoad.jsp页面     String path = request.getContextPath();     String basePath = request.getScheme() + "://"             + request.getServerName() + ":" + request.getServerPor
这是一个Java web上传图片的方法（纯代码）
.Z少 的博客
05-29 980
上传图片的方法 @ResponseBody @RequestMapping(value="/upload_images_rich/{fileKind}") public Object upload_images_rich(@RequestParam MultipartFile file,@PathVariable("fileKind") String fileKind) { JsonResult<Map<String,Object>> result =
javaweb工程中图片的显示
wangbaojian_good的专栏
11-01 4853
最近在项目中需要实现一个功能，门户网站上显示用户上传的头像，其实就是文件的上传与显示，这里只说头像的显示问题，通过网上查资料发现有两种实现方式，总结下来，自己备用，也分享给朋友。      第一种情况，如果照片就在工程里边，那么可以通过链接直接访问到：            如图所示，我的照片文件所在的路径为：WebContent/image/tx_deafult.png，那么在页面上的访
Java Web图片上传
刘鹏博的博客
10-26 1231
使用jQueryForm结合AJax异步上传图片： 效果图前端代码： &lt;form id="uploadForm" method="post" enctype="multipart/form-data"&gt; &lt;!-- 在选择图片的时，触发Ajax异步上传图片 --&gt; &lt;input name="file" type="file&qu
自动下载指定关键词的高清图片
weixin_47248704的博客
10-25 560
爬虫自动下载指定分类图片1.起源2.规律查找3.代码逻辑4.部分代码实现4.1 原始网页内容读取4.2 根据搜寻条件提取出符合要求的字典类型4.3 获取图片的URL4.结果4.完整的代码 1.起源 最近迷上二次元高清图片，一直在网上寻找，发现一个可以下载高清图片的网站，但奈何需要手动一张张的去点击下载，非常的不便捷，以上突发奇想，能否写个爬虫自动下载呢？ 2.规律查找 检索内容规律。通过手动对源代码审查，发现该网站(网站名就不写出来了，以防被封)对检索的内容是先给出一个列表结果，点击列表内的内容后才会跳转
javaweb中上传图片并显示图片，用我要上传课程信息（里面包括照片）这个例子说明...
weixin_30527551的博客
04-07 503
原理： 从客户端上传到服务器 照片——文件夹——数据库 例如：桌面一张照片，在tomacat里创建upload文件夹，把桌面照片上传到upload文件夹里，并且把照片的名字取出来，取完名字把这个名字插入到数据库里面，下次要想取就取这个名字到upload文件夹下面去寻找这个照片，找到以后写相对路径，就可以在页面上显示照片。 所以我数据库的类型是照片的路径是varc...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值