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

实现效果如下图所示
只需要将下面的html部分的代码放入你的代码即可
（注意引入jQuery文件和html头部的css样式，使用的是ajax提交）
 <!--

 需引入jQuery

 引入样式文件

 引入上传图片预览的代码

 获取上传的图片信息

 在php页面通过 request()->file() 获取图片信息

 -->

 <!-- 上传图片预览时需要的css start 无需改动-->

 <style type="text/css">

     .file {

         position: relative;

         display: inline-block;

         background: #D0EEFF;

         border: 1px solid #99D3F5;

         border-radius: 4px;

         padding: 4px 12px;

         overflow: hidden;

         color: #1E88C7;

         text-decoration: none;

         text-indent: 0;

         line-height: 20px;

     }

     .file input {

         position: absolute;

         font-size: 100px;

         right: 0;

         top: 0;

         opacity: 0;

     }

     .file:hover {

         background: #AADFFD;

         border-color: #78C3F3;

         color: #004974;

         text-decoration: none;

     }

 </style>

 <!-- 上传图片预览时需要的css end -->

 <body>

 <div class="wrapper">

     <div class="container-fluid">

         <!-- end page title -->

         <div class="row">

             <div class="col-12">

                 <div class="card">

                     <div class="card-body">

                         <form class="form-horizontal">

                             <div class="form-group row">

                                 <label class="col-sm-2 col-form-label">实现图片预览效果</label>

                                 <div class="col-sm-10">

                                     <a href="javascript:;" class="file">选择文件

                                         <input type="file" name="img" required>

                                     </a>

                                     <img id="img" height="100" src="">

                                 </div>

                             </div>

                             <div class="form-group row">

                                 <label class="col-sm-2 col-form-label"></label>

                                 <div class="col-sm-10">

                                     <button type="button" class="btn btn-primary" onclick="return preserve()">保存</button>

                                 </div>

                             </div>

                         </form>

                     </div> <!-- end card-box -->

                 </div> <!-- end card-->

             </div><!-- end col -->

         </div>

         <!-- end row -->

     </div>

 </div>

 </body>

 </html>

 <script>

     function preserve()

     {

         var formData    = new FormData();

         var img = $("[name='img']").prop('files')[0];/*获取上传图片的信息*/

         formData.append("img",img);

         $.ajax({

             type : "post",

             url : "{:URL('admin/Banner/shopbanneradd')}",/*此处填写上传路径*/

             processData : false,

             contentType : false,

             data : formData,

             success : function(data) {

             }

         });

     }

 </script>

 <!-- 上传图片并预览的js文件 start  无需改动-->

 <script type="text/javascript">

     var small_img = document.querySelector('input[name=small_img]');

     var img = document.querySelector('input[name=img]');

     small_imgs = document.querySelector('#small_img');

     imgs = document.querySelector('#img');

     if (small_img) {

         small_img.addEventListener('change', function() {

             var file = this.files[0];

             var reader = new FileReader();

             // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片

             reader.addEventListener("load", function() {

                 small_imgs.src = reader.result;

             }, false);

             // 调用reader.readAsDataURL()方法，把图片转成base64

             reader.readAsDataURL(file);

             $("img").eq(0).css("display", "block");

         }, false);

     }

     if(img){

         img.addEventListener('change', function() {

             var file = this.files[0];

             var reader = new FileReader();

             // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片

             reader.addEventListener("load", function() {

                 imgs.src = reader.result;

             }, false);

             // 调用reader.readAsDataURL()方法，把图片转成base64

             reader.readAsDataURL(file);

             $("img").eq(1).css("display", "block");

         }, false);

     }

 </script>

 <!-- 上传图片并预览的js文件 end -->
over！over！over！
巴特西

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

最新文章

热门文章
