html页面选择图片上传时实现图片预览功能

 

实现效果如下图所示

只需要将下面的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！

posted @ 2019-03-23 10:48  为牧  阅读(12069)  评论(0)  编辑  收藏  举报