实现效果如下图所示
只需要将下面的html部分的代码放入你的代码即可
（注意引入jQuery文件和html头部的css样式，使用的是ajax提交）
1 <!-- 2 需引入jQuery 3 引入样式文件 4 引入上传图片预览的代码 5 获取上传的图片信息 6 在php页面通过 request()->file() 获取图片信息 7 --> 8 <!-- 上传图片预览时需要的css start 无需改动--> 9 <style type="text/css"> 10 .file { 11 position: relative; 12 display: inline-block; 13 background: #D0EEFF; 14 border: 1px solid #99D3F5; 15 border-radius: 4px; 16 padding: 4px 12px; 17 overflow: hidden; 18 color: #1E88C7; 19 text-decoration: none; 20 text-indent: 0; 21 line-height: 20px; 22 } 23 24 .file input { 25 position: absolute; 26 font-size: 100px; 27 right: 0; 28 top: 0; 29 opacity: 0; 30 } 31 32 .file:hover { 33 background: #AADFFD; 34 border-color: #78C3F3; 35 color: #004974; 36 text-decoration: none; 37 } 38 </style> 39 <!-- 上传图片预览时需要的css end --> 40 41 <body> 42 43 <div class="wrapper"> 44 <div class="container-fluid"> 45 46 <!-- end page title --> 47 48 <div class="row"> 49 <div class="col-12"> 50 <div class="card"> 51 <div class="card-body"> 52 <form class="form-horizontal"> 53 <div class="form-group row"> 54 <label class="col-sm-2 col-form-label">实现图片预览效果</label> 55 <div class="col-sm-10"> 56 <a href="javascript:;" class="file">选择文件 57 <input type="file" name="img" required> 58 </a> 59 <img id="img" height="100" src=""> 60 </div> 61 </div> 62 <div class="form-group row"> 63 <label class="col-sm-2 col-form-label"></label> 64 <div class="col-sm-10"> 65 <button type="button" class="btn btn-primary" onclick="return preserve()">保存</button> 66 </div> 67 </div> 68 </form> 69 70 </div> <!-- end card-box --> 71 </div> <!-- end card--> 72 </div><!-- end col --> 73 </div> 74 <!-- end row --> 75 76 </div> 77 </div> 78 </body> 79 </html> 80 <script> 81 function preserve() 82 { 83 var formData = new FormData(); 84 var img = $("[name='img']").prop('files')[0];/*获取上传图片的信息*/ 85 formData.append("img",img); 86 $.ajax({ 87 type : "post", 88 url : "{:URL('admin/Banner/shopbanneradd')}",/*此处填写上传路径*/ 89 processData : false, 90 contentType : false, 91 data : formData, 92 success : function(data) { 93 94 } 95 }); 96 } 97 98 </script> 99 <!-- 上传图片并预览的js文件 start 无需改动--> 100 <script type="text/javascript"> 101 var small_img = document.querySelector('input[name=small_img]'); 102 var img = document.querySelector('input[name=img]'); 103 small_imgs = document.querySelector('#small_img'); 104 imgs = document.querySelector('#img'); 105 if (small_img) { 106 small_img.addEventListener('change', function() { 107 var file = this.files[0]; 108 var reader = new FileReader(); 109 // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片 110 reader.addEventListener("load", function() { 111 small_imgs.src = reader.result; 112 }, false); 113 // 调用reader.readAsDataURL()方法，把图片转成base64 114 reader.readAsDataURL(file); 115 $("img").eq(0).css("display", "block"); 116 }, false); 117 } 118 if(img){ 119 img.addEventListener('change', function() { 120 var file = this.files[0]; 121 var reader = new FileReader(); 122 // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片 123 reader.addEventListener("load", function() { 124 imgs.src = reader.result; 125 }, false); 126 // 调用reader.readAsDataURL()方法，把图片转成base64 127 reader.readAsDataURL(file); 128 $("img").eq(1).css("display", "block"); 129 }, false); 130 } 131 </script> 132 <!-- 上传图片并预览的js文件 end -->
over！over！over！