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);" onclick="upclick();" style='color:black;text-decoration: none'>上传文档选择（doc、docx、xls、xlsx）</a>
                       <span id="fileName" ></span>  
                           <a href="javascript:void(0);" onclick="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

<c:if test="${pd.NOTICE_IMAGE != '' && pd.NOTICE_IMAGE !=null}">
                           <a href="javascript:void(0);" onclick="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.onload=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

第二标红字体

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