js 移动端漂亮input框上传本地，显示缩略图，点击可以查看大图

最新推荐文章于 2024-06-27 19:48:27 发布

原创最新推荐文章于 2024-06-27 19:48:27 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何通过隐藏原生input[type=file]元素，并使用自定义图片作为触发器来实现一个美观的文件上传功能。用户点击自定义图片，可以选择本地文件，同时显示所选文件的缩略图，点击缩略图可查看大图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解释一下思路：我这里是把input框给隐藏了，将自己的图片覆盖在input框上，点击图片就关联同级的input框，这样就可以自定义一个漂亮的类型为file的input框。

html代码：

<body>

 <div  style="margin-left: 5%;">
     <a href="javascript:;"class="upload"  >
         <input type="file" name="files" id="upload1"accept="image/*;capture=camcorder" style="display:none;"/> 
         <imgsrc="覆盖input框的图片" onclick="clickInput(this);"/>
     </a> 
     <spanid="upload1Span"><span id="upload1Font">请选择图片</span>
    <img id="upload1Img"onclick="picBig(this);"  width="-1"height="-1" style="diplay:none" />
    <span id="upload1Del"onclick="delect(this)" style="display: none;">删除</span>
     </span>
</div>   
<div id="divCenter"  onclick="picClose();" align="center" style=" position:absolute;z-index: 9;display:none;               background-color: #808080; width:100%;height:100%;left:0px;top:0px;"><img id="largeImg" />
 </div>
</body>

js代码：

<script >
 //首先根据id得到input框的文件，判断大小，如果大于100M就不给上传，如果不大于就可以上传
 $("input[type='file']").on("change",function(){
      var load =$(this).attr("id");
      var fileSize = $(this).get(0).files[0].size;  
         if(fileSize> 104857600 ){
           alert("图片不大于100MB。");
           return;
         }
         else{
            vardocObj=document.getElementById(load);
            varimgObjPreview=document.getElementById(load+"Img");
            var del =document.getElementById(load+"Del");
           document.getElementById(load+"Font").style.display ='none' ;
           del.style.display = 'inline';
         if(docObj.files && docObj.files[0]){
                       imgObjPreview.style.display = 'inline';
                       imgObjPreview.style.width = '50px';
                       imgObjPreview.style.height = '50px';                   
             imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
            return true;
        }
   }) 

  function clickInput(ele){
     $(ele).prev().click();
  }

   function picBig(ele) {
        varload=ele.id.replace("Img","");  //得到上传图片的id
        vardocObj=document.getElementById(load);  //根据id得到上传图片
        varimgObjPreview=document.getElementById("largeImg"); //得到大图
        if(docObj.files &&    docObj.files[0]){
         imgObjPreview.src= window.URL.createObjectURL(docObj.files[0]); //将上传图片的src赋给大图的src
               var big = document.getElementById('divCenter'); //得到大图所在的div
               bid.style.display = "block";  //改变大图所在div的样式
            }
            }  

  function delect(ele){
    $(ele).prev().get(0).style.display= 'none';
    ele.style.display = 'none' ;
    var inputId =ele.id.replace("Del","");
    document.getElementById(inputId).value = '';
    var fontId =ele.id.replace("Del","Font");
    document.getElementById(fontId).style.display ="inline";
 }


 function picBig(ele) {
      varimgObjPreview=document.getElementById("largeImg");
      imgObjPreview.src=ele.src;
      var big =document.getElementById('divCenter');
      big.style.display= "block";
 }

 function picClose() {
      var big =document.getElementById('divCenter');
      big.style.display = "none";
 }

</script>