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

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

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

主要注意点：

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

javascript

2.限定input数据类型

javascript
其他类型限定
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/*' />
<img class='upimg' id='previmg' src='' />
js部分
function previewImage(obj, previmgid){
    if (window.FileReader) {
         var reader = new FileReader();
         reader.onload = function (e) {
            document.getElementById(previmgid).setAttribute("src", e.target.result);
        }
        reader.readAsDataURL(obj.files[0]);
    } else if (browserVersion.indexOf("SAFARI") > -1) {
        alert("不支持浏览器的图片预览!");
    }
}
参考：https://bbs.csdn.net/topics/390674987

预览服务端图片–直接给服务器图片路径即可

<img class='upimg' id='previmg' src='127.0.0.1/image/head/xx.png' />

5.考虑字段联动（常见省市联动）这里可以使用插件，无插件的情况（自定义）

//城市数据
var prov_cist=[    {name:'四川',id:1,pid:0, city:[{pid:1, id:1, name:"成都"},{pid:1, id:2, name:"巴中"}]},
    {name:'上海',id:2,pid:0, city:[{pid:2, id:3, name:"闵行区"},{pid:2, id:4, name:"嘉定区"}]},
]
/**
 *联动省市的数据
 provid 省字段name值
 cityid 市字段name值
 */
function onChangeSlt(obj, provid, cityid){
    if(provid == "province") {//省修改
        var sledprov = $("select[name='province']").val();
        var citys = [],editfrom="";
        prov_cist && (citys = prov_cist.filter(provs=>provs.id == sledprov)[0].city); 
        citys && citys.map(function(slt){
          editfrom += ""+slt.name+"";
        })
         $("#mask .edit select[name='"+cityid+"']").html(editfrom);
    }
}

源码链接：https://pan.baidu.com/s/1AmWWGSu-Ci5sWOnSsFUpiA&shfl=sharepset
提取码：bf4m

---

水平有限，望指导，小白在此谢过。