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

柔光的暖阳◎ 2023-06-08 10:58 22阅读 0赞

最近有小伙伴辞职面试中提到，给你三个小时完成一个ssm项目。其实看起来挺简单，但是纯粹的自己搭建环境一步一步起来，就我自己而言应该是完成不了的哎（吐槽…可能太菜了）  
源码链接：[https://pan.baidu.com/s/1AmWWGSu-Ci5sWOnSsFUpiA&shfl=sharepset][https_pan.baidu.com_s_1AmWWGSu-Ci5sWOnSsFUpiA_shfl_sharepset]  
提取码：bf4m  
类似：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]  
通过两个多小时的实战，仅仅也只是写了前端代码而已（效率简直渣哎），前端接口都是已经预留了，但是目前还没有拼接到后端（后期等待实现）  
最终效果  
![在这里插入图片描述][20191018130858545.gif]  
主要注意点：

### 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][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

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

### 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 += "<option value='"+slt.id+"' pid='"+slt.pid+"' >"+slt.name+"</option>";
            })
             $("#mask .edit select[name='"+cityid+"']").html(editfrom);
        }
    }

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

--------------------

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

[https_pan.baidu.com_s_1AmWWGSu-Ci5sWOnSsFUpiA_shfl_sharepset]: https://pan.baidu.com/s/1AmWWGSu-Ci5sWOnSsFUpiA&shfl=sharepset
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]: /images/20230531/03bf64e3c5d44a86a745403f8b75ef18.png
[20191018130858545.gif]: /images/20230531/96dcee0b3d354ece8714882292deaaf7.png
[https_zhidao.baidu.com_question_364507457.html]: https://zhidao.baidu.com/question/364507457.html