前端页面（form表单）
<form method="post" enctype="multipart/form-data" action="${site.dynamicPath}content/save.do" style="border: 3px solid rgb(242,244,246); box-shadow:0px 0px 5px 5px #aaa; ">
<input type="hidden" name="_csrf" value="<@_csrfToken/>"/>
<input name="returnUrl" type="hidden" value="//xzw.ueweixin.com/" />
<input name="categoryId" type="hidden" value="162"/>
<input name="modelId" type="hidden" value="join-jlk"/>
<input name="title" type="hidden" value="简历" size="60" maxlength="255"/>
<div class="list_block d-flex align-items-center" style="margin-left:80px;">
<h3 class="h3">基本信息填写</h3>
<div class="list_jl_item">
<div class="list_jl_item_left">姓名:</div><br/>
<div class="list_jl_item_right">
<input name="name" value="" size="50" type="text" maxlength="10" placeholder="请输入您的名字">
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">身份证号:</div><br/>
<div class="list_jl_item_right"><input name="idCard" value="" size="18" type="text" placeholder="请输入" maxlength="18"></div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">民族:</div><br/>
<div class="list_jl_item_right">
<select class="combox" name="nation" placeholder="请选择" value="">
<option value="汉族">汉族</option>
<option value="少数民族">少数民族</option>
</select>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">政治面貌:</div><br/>
<div class="list_jl_item_right">
<select class="combox" name="political" placeholder="请选择" value="">
<option value="党员">党员</option>
<option value="共青团员">共青团员</option>
<option value="群众">群众</option>
</select>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">婚姻状况:</div><br/>
<div class="list_jl_item_right">
<select class="combox" name="maritalStatus" placeholder="请选择" value="">
<option value="已婚">已婚</option>
<option value="未婚">未婚</option>
</select>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">身高:</div><br/>
<div class="list_jl_item_right"><input name="height" value="" size="50" type="text" placeholder="请选择"></div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">毕业院校:</div><br/>
<div class="list_jl_item_right"><input name="graduationSchool" value="" type="text" placeholder="请输入您的院校"></div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">专业:</div><br/>
<div class="list_jl_item_right"><input name="major" value="" type="text" placeholder="请输入您的专业"></div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">学历:</div><br/>
<div class="list_jl_item_right">
<select class="combox" name="education" value="" placeholder="请选择">
<option value="本科">本科</option>
<option value="专科">专科</option>
<option value="研究生及以上">研究生及以上</option>
</select>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">学位:</div><br/>
<div class="list_jl_item_right">
<select class="combox" name="academicDegree" value="" placeholder="请选择">
<option value="学士学位">学士学位</option>
<option value="无">无</option>
<option value="研究生及以上学位">研究生及以上学位</option>
</select>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">毕业时间:</div><br/>
<div class="list_jl_item_right">
<input id="graduationTime" name="graduationTime" value="" type="text" maxlength="20" placeholder="请选择" class="layui-input">
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">工作单位及职务:</div><br/>
<div class="list_jl_item_right"><input name="work" value="" type="text" maxlength="100" placeholder="请输入"></div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">户口所在地:</div><br/>
<div class="list_jl_item_right"><input name="registeredAddress" value="" type="text" placeholder="请输入" maxlength="80"></div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">家庭住址:</div><br/>
<div class="list_jl_item_right"><input name="address" value="" type="text" placeholder="请输入" maxlength="80"></div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">联系电话:</div><br/>
<div class="list_jl_item_right"><input name="telephone" value="" type="text" placeholder="请输入" maxlength="11"></div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">邮箱:</div><br/>
<div class="list_jl_item_right"><input name="email" value="" type="text" placeholder="请输入" maxlength="20"></div>
</div>
<h3 class="h3">证书填写</h3>
<div class="list_jl_item">
<div class="list_jl_item_left">普通话证书:</div><br/>
<div class="list_jl_item_right">
<select class="combox" name="certificatePu" value="" placeholder="请选择">
<option value="有">有</option>
<option value="无">无</option>
</select>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">计算机证书:</div><br/>
<div class="list_jl_item_right">
<select class="combox" name="certificateComputer" value="" placeholder="请选择">
<option value="有">有</option>
<option value="无">无</option>
</select>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">英语证书:</div><br/>
<div class="list_jl_item_right">
<select class="combox" name="certificateEnglish" value="" placeholder="请选择">
<option value="">有</option>
<option value="">无</option>
</select>
</div>
</div>
<h3 class="h3">其他</h3>
<div class="list_jl_item">
<div class="list_jl_item_left">高中以来学习及工作经历:</div><br/>
<div class="list_jl_item_right">
<textarea name="workExperience" value="" cols="60" rows="3" maxlength="200" placeholder="请填写..."></textarea>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">获奖情况:</div><br/>
<div class="list_jl_item_right">
<textarea name="awards" value="" cols="60" rows="3" maxlength="200" placeholder="请填写..."></textarea>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">获取资格证书情况:</div><br/>
<div class="list_jl_item_right">
<textarea name="certificate" value="" cols="60" rows="3" maxlength="200" placeholder="请填写..."></textarea>
</div>
</div>
<div class="list_jl_item">
<div class="list_jl_item_left">有何特长:</div><br/>
<div class="list_jl_item_right">
<textarea name="skills" value="" cols="60" rows="3" maxlength="200" placeholder="请填写..."></textarea>
</div>
</div>
<h3 class="h3">照片上传</h3>
<div class="text_upload">请上传1寸证件照，大小不超过24K，要求.jpg格式</div>
<div class="bg_upload">
<input type="file" id="photo" accept="image/*">
<input type="hidden" class="jl_img" name="imgVal">
<img src="" alt="">
<span class="bg_jia" id="bg_jia">+</span>
</div>
<div class="text_upload" style="color: #007bff;">请如实填写信息，保证信息真实有效，因信息不准确造成的后果自行承担，本次招聘最终解释权归***所有。</div>
</div>
<div class="list_block justify-content-md-center list_jl_btn">
<button class="jl_btn" type="submit">
提交
</button>
</div>
</form>
<script type="text/javascript">
var file = document.getElementById('photo');
var image = document.querySelector("img");
file.onchange = function() {
var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
var pettern = /^image/;
//console.info(fileData.type)
var maxSize = 24 ; //图片最大KB
if(!/(jpg|jpeg)$/.test(fileData.type)){
alert("请上传 jpg或jpeg 格式的图片！");
return;
}
/**/
if(fileData.size > maxSize* 1024){
alert("请上传"+maxSize+"KB以下的图片");
return;
}
if (!pettern.test(fileData.type)) {
alert("图片格式不正确");
return;
}
var reader = new FileReader();
reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
$("#bg_jia").html("");
/*当读取操作成功完成时调用*/
reader.onload = function(e) {
var data = e.target.result;
//加载图片获取真实宽度和高度
var imageInfo = new Image();
imageInfo.src = data;
imageInfo.onload = function() {
let width = imageInfo.width;
let height = imageInfo.height;
isAllow = width == 295 && height == 413;
if(isAllow == false) {
//image.setAttribute("src", '');
alert("请上传 宽为295像素和高为413像素 的一寸证件照!")
return;
}else{
image.setAttribute("src", data);
$(".jl_img").val(data)
};
};
//console.log(e); //查看对象
//console.log(this.result);//要的数据 这里的this指向FileReader（）对象的实例reader
//image.setAttribute("src", this.result);
}
}
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#graduationTime' //指定元素
,format: 'yyyy-MM-dd'
});
});
</script>
学习到的网站：
链接: css设置边框阴影;box-shadow的使用.
链接: js上传图片.
链接: javascript怎么清空一个div里面的内容.
链接: 关于HTML中上传图片.
链接: html 自定义上传图片样式，并回显.
链接:JS验证图片格式和大小并预览
扫一扫
1265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
