JS 上传文件 页面先展示文件名字、图片小技巧

一、文件名字

 

1、jsp
                            <c:if test="${pd.REMARK != '' && pd.REMARK !=null}">
                            <input type="file" name="uptohtml" id="uptohtml" style="display: none;"/>
                            <a href="javascript:void(0);" οnclick="upclick();" style='color:black;text-decoration: none'>上传文档选择（doc、docx、xls、xlsx）</a>
                            <span id="fileName" ></span>&nbsp;&nbsp;
                            <a href="javascript:void(0);" οnclick="showFile('${pd.REMARK}');" style='text-decoration: none;' id="showFile">查看文档</a>
                            </c:if>

 

2、Js文件

 function upclick(){
         $('#uptohtml').click();
       } 

 

 

 $(function() {
       $("#uptohtml").change(function(){
                    //获取FileUpload对象
                    var x = document.getElementById("uptohtml").files;
                    //把获得的文件名放入text里面显示
                    $("#fileName").text(x[0].name);
                    $("#showFile").hide();
                });
       });

 

 

二、图片

1、jsp

<div class="ImgDiv">
                            <input type="file" name="NOTICE_IMAGE" id="NOTICE_IMAGE" style="display: none;"/>

<c:if test="${pd.NOTICE_IMAGE != '' && pd.NOTICE_IMAGE !=null}">                                                        
                            <a href="javascript:void(0);" οnclick="Imgclick();" style='color:black;text-decoration: none;'>更改图片</a>
                            <img src="uploadFiles/file/${pd.NOTICE_IMAGE}" class="Imgcss"/>      
</c:if>

 </div>

 

 

2、JS文件

function Imgclick(){
         $('#NOTICE_IMAGE').click();
       }
       
       $(function() {
       $("#NOTICE_IMAGE").change(function(){
        var file= document.getElementById("NOTICE_IMAGE").files[0];        //获取FileUpload对象

        var reader = new FileReader();        //创建读取文件的对象

        reader.οnlοad=function(e) {
        imgFile = e.target.result;
        $(".Imgcss").attr('src', imgFile);
        };

       reader.readAsDataURL(file); //正式读取文件        

    
                });                             
       });
       
三、 鼠标经过图标放大

       1、css

.ImgDiv{  // div大小
  width:100%;
  border: #000 solid 0px;
}  
  
.Imgcss{  //最初大小
  width:20px;
  height:20px;
 }
   
.ImgDiv img{
  cursor: pointer;
  transition: all 0.6s; //放大经过时间
}

.ImgDiv img:hover{
  transform: scale(8.0); //放大倍数
}

 

2、html

第二标红字体