分享4：关于input上传附件html部分

最近有小伙伴辞职面试中提到，给你三个小时完成一个ssm项目。其实看起来挺简单，但是纯粹的自己搭建环境一步一步起来，就我自己而言应该是完成不了的哎（吐槽…可能太菜了）
源码链接：https://pan.baidu.com/s/1AmWWGSu-Ci5sWOnSsFUpiA&shfl=sharepset
提取码：bf4m
类似：

通过两个多小时的实战，仅仅也只是写了前端代码而已（效率简直渣哎），前端接口都是已经预留了，但是目前还没有拼接到后端（后期等待实现）
最终效果

主要注意点：

1.顶部导航栏图标【rel=icon】

javascript<link rel="icon" href="./src/image/icon/staff.ico" type="image/x-icon"/>

2.限定input数据类型

javascript <input type='file' accept="image/*"/>
其他类型限定
accept=”application/msword”//word
accept=”application/pdf”//pdf
accept=”image/gif”
accept=”image/jpeg”
accept=”image/tiff”
accept=”image/x-png”
accept=”text/html”
accept=”video/quicktime”
accept=”video/x-mpeg2”
accept=”video/x-msvideo”
其他请看https://zhidao.baidu.com/question/364507457.html

3.设置input附件上传域（对那些点击区域生效）

增大点击区域，隐藏原有样子，或者透明度降低

element.style {
   
    width: 120px;
    height: 120px;
    border: 1px solid;
    opacity: 0.5;
}

4.图片预览（单图片预览）

本地上传预览

html部分
<input class='upinput' onchange='previewImage(this,"previmg")' type='file' accept='image/*'