html頁面選擇圖片上傳時實現圖片預覽功能

時間 2019-11-09

標籤 html 頁面選擇圖片上傳實現預覽功能欄目 HTML 简体版

原文原文鏈接

實現效果以下圖所示javascript

只須要將下面的html部分的代碼放入你的代碼便可php

（注意引入jQuery文件和html頭部的css樣式，使用的是ajax提交）css

  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！html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。