如图：点击图片按钮，选择图片后，图片按钮变成自己选择的那张
js:

<script type="text/javascript">
                 $(function(){
                         $("#image").click(function(){
                                 $("#file").click();
                         });
                         
                         $("#file").on("change",function(){
                                 
                                 function getObjectURL(file) {  
                                          var url = null;   
                                          if (window.createObjectURL!=undefined) {  
                                           url = window.createObjectURL(file) ;  
                                          } else if (window.URL!=undefined) { // mozilla(firefox)  
                                           url = window.URL.createObjectURL(file) ;  
                                          } else if (window.webkitURL!=undefined) { // webkit or chrome  
                                           url = window.webkitURL.createObjectURL(file) ;  
                                          }  
                                          return url;  
                                   }  

                                 var file =document.getElementById("file");
                                         var src= getObjectURL(file.files[0]) ;//获取文件信息                          
                                        //获取到input的value，里面是文件的路径
                                        var filePath =file.value;
                                         fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                                         // 检查是否是图片
                                        if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
                                          alert("上传错误,文件格式必须为：png/jpg/jpeg!");                 
                                        }else{
                                                $("#image").attr('src',src);
                                        }
                         });                 
                 });


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html:

<tr>
        <td><label>会场图片:</label></td>
        <td colspan="3">
                 <img src="images/addimage.jpg" id="image" width="30px" height="30px" >
                 <input type="file" id="file"  multiple="multiple" name="activityImage" style="display: none;">                                         
        </td>
</tr>
---------------------
转载，仅作分享，侵删
作者：iChangebaobao
原文：https://blog.csdn.net/iChangebaobao/article/details/85563991

奈斯，加油