我這個圖片上傳使用的layui自帶的檔案上傳外掛

上傳前效果圖：

上傳後效果圖：

效果還是蠻漂亮的對吧。。

直接上程式碼不囉嗦：

HTML程式碼：

 1   <div class="layui-form-item">
 2                       <label class="layui-form-label">
 3                         文章封面
 4                     </label>
 5                     <button type="button" class
 
="layui-btn" id="news_img_button" >上傳圖片</button>
 6                     <input type="hidden" value="" id="news_pic" name="news_pic" required="" lay-verify="news_img" autocomplete="off" class="layui-input">
 7                     <div class="layui-upload-list">
 8                         <
 
label class="layui-form-label">
 9                         </label>
10                         <img class="layui-upload-img" id="newsimg" style="width: 200px;height: 140px;margin: 0 10px 10px 0;" src="" onerror="this.src='/admin/images/no_img.png'">
11                         <p id="newsimg_text"
 
></p>
12                     </div>
13                   </div>

JS程式碼

 1  <script>
 2             layui.use('upload', function(){
 3                 var $ = layui.jquery
 4                         ,upload = layui.upload;
 5 
 6                 //普通圖片上傳
 7                 var uploadInst = upload.render({
 8                     elem: '#news_img_button'
 9                     ,url: '/admin/news/uploadImg'
10                     ,before: function(obj){
11                         //預讀本地檔案示例，不支援ie8
12                         obj.preview(function(index, file, result)
13                         {
14                             $('#newsimg').attr('src', result); //圖片連結（base64）
15                         });
16                     }
17                     ,done: function(res){
18 
19                         //如果上傳失敗
20                         if(res.status == 'SUCCESS')
21                         {
22                             $("#news_pic").attr('value',res.filename)
23                         }
24                         if(res.status== 'FAIL')
25                         {   
26                             //$("#newsimg_text").html(res.msg);
27                             layer.msg(res.msg);
28                         }
29                         //上傳成功
30                     }
31 
32                 });
33             });
34         </script>

控制器程式碼：

 1 //控制器程式碼
 2    public function uploadImg()
 3     {
 4         // 獲取表單上傳檔案 例如上傳了001.jpg
 5         $file = request()->file('file');
 6         $fiels = request()->file();
 7         // 上傳到本地伺服器
 8          try {
 9             validate(['image'=>'fileSize:5120|fileExt:jpg,png,gif,jpeg,bmp|fileMime:image/jpeg,image/gif,image/png,image/bmp'])->check($fiels);
10 
11             $savename = \think\facade\Filesystem::disk('public')->putFile( 'news', $file);
12 
13             return json(array('status'=>'SUCCESS','msg'=>"上傳成功",'filename'=>"/uploads/".$savename));
14 
15         } catch (\think\exception\ValidateException $e) {
16 
17             return json(array('status'=>'FAIL','msg'=>"上傳失敗".$e->getMessage()));
18         }
19     }     

蠻掛著看看，沒準有驚喜呢，當然了寫文章並不是為了賺打賞錢，最主要目的是更好的記錄！

本文來自部落格園，作者：yangphp，轉載請註明原文連結：https://www.cnblogs.com/ypeih/p/15470253.html