TP5 webuploader 單頁面多實例上傳圖片 案例
阿新 • • 發佈：2019-01-29
ads ttr 代碼 trap utf-8 出錯 cep margin gin
在使用webuploader上傳文件過程中，如果同一個頁面存在多個上傳區域，可以參考本示例代碼。
HTML 代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>{:config(‘WEB_SITE_TITLE‘)}</title> 7 <link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> 8 <link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> 9 <link href="/static/admin/css/animate.min.css" rel="stylesheet"> 10 <link href="/static/admin/css/plugins/switchery/switchery.css"rel="stylesheet"> 11 <link href="/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet"> 12 <link href="/static/admin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"> 13 </head> 14 15 <link rel="stylesheet" type="text/css" href="/static/admin/webupload/webuploader.css"> 16 <link rel="stylesheet" type="text/css" href="/static/admin/webupload/style.css"> 17 <body class="gray-bg"> 18 <div class="wrapper wrapper-content animated fadeInRight"> 19 <div class="row"> 20 <div class="col-sm-12"> 21 <div class="ibox float-e-margins"> 22 <div class="ibox-content"> 23 <form class="form-horizontal m-t" name="add" id="add" method="post" action="add_game_role"> 24 <div class="hr-line-dashed"></div> 25 <div class="form-group"> 26 <label class="col-sm-3 control-label">圖片1：</label> 27 <div class="input-group col-sm-4"> 28 <input type="hidden" id="data_photo" name="role_big_pic" > 29 <div id="bigFileList" class="uploader-list" style="float:right"></div> 30 <div style="float:left" ><span onClick="webUpload(‘bigFileList‘)" class="uploadImg" >選擇圖片</span></div> 31 <img id="img_data" height="100px" style="float:left;margin-left: 50px;margin-top: -10px;" src="/static/admin/images/no_img.jpg"/> 32 </div> 33 </div> 34 <div class="hr-line-dashed"></div> 35 <div class="form-group"> 36 <label class="col-sm-3 control-label">圖片2：</label> 37 <div class="input-group col-sm-4"> 38 <input type="hidden" id="data_photo" name="role_min_pic" > 39 <div id="minFileList" class="uploader-list" style="float:right"></div> 40 <div style="float:left" ><span onClick="webUpload(‘minFileList‘)" class="uploadImg" >選擇圖片</span></div> 41 <img id="img_data" height="100px" style="float:left;margin-left: 50px;margin-top: -10px;" src="/static/admin/images/no_img.jpg"/> 42 </div> 43 </div> 44 <div class="hr-line-dashed"></div> 45 <div class="form-group"> 46 <div class="col-sm-4 col-sm-offset-3"> 47 <button class="btn btn-primary" type="submit"><i class="fa fa-save"></i> 保存</button> 48 <a class="btn btn-danger" href="javascript:history.go(-1);"><i class="fa fa-close"></i> 返回</a> 49 </div> 50 </div> 51 </form> 52 </div> 53 </div> 54 55 </div> 56 </div> 57 </div> 58 <script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script> 59 <script type="text/javascript"> 60 61 var list; 62 function webUpload(id) { 63 list = $(‘#‘+id); 64 console.log(id) 65 } 66 67 //上傳圖片,初始化WebUploader 68 var uploader = WebUploader.create({ 69 70 auto: true,// 選完文件後，是否自動上傳。 71 swf: ‘/static/admin/js/webupload/Uploader.swf‘,// swf文件路徑 72 server: "{:url(‘Upload/uploadPlus‘, [‘folder‘=> ‘gamerole‘])}",// 文件接收服務端。 73 duplicate :true,// 重復上傳圖片，true為可重復false為不可重復 74 pick: ‘.uploadImg‘,// 選擇文件的按鈕。可選。 75 76 accept: { 77 title: ‘Images‘, 78 extensions: ‘gif,jpg,jpeg,bmp,png‘, 79 mimeTypes: ‘image/jpg,image/jpeg,image/png‘ 80 }, 81 82 ‘onUploadSuccess‘: function(file, data, response) { 83 list.prev().val(‘gamerole/‘ + data._raw); // 實際保存的圖片地址字符串你 84 list.next().next().attr(‘src‘, ‘/uploads/images/gamerole/‘ + data._raw).show(); // 顯示新上傳的圖片 85 } 86 }); 87 88 uploader.on( ‘fileQueued‘, function( file ) { 89 list.html( ‘<div id="‘ + file.id + ‘" class="item">‘ + 90 ‘<h4 class="info">‘ + file.name + ‘</h4>‘ + 91 ‘<p class="state">正在上傳...</p>‘ + 92 ‘</div>‘ ); // 顯示圖片名稱 93 94 }); 95 96 97 // 文件上傳成功 98 uploader.on( ‘uploadSuccess‘, function( file ) { 99 100 $( ‘#‘+file.id ).find(‘p.state‘).text(‘上傳成功！‘); 101 }); 102 103 // 文件上傳失敗，顯示上傳出錯。 104 uploader.on( ‘uploadError‘, function( file ) { 105 $( ‘#‘+file.id ).find(‘p.state‘).text(‘上傳出錯!‘); 106 }); 107 108 109 </script> 110 111 </body> 112 </html>
服務端 PHP 代碼：
1 // 圖片上傳 2 public function uploadPlus() { 3 $file = request()->file(‘file‘); 4 $folder = input(‘param.folder‘); 5 $dir = ROOT_PATH . ‘public‘ . DS . ‘uploads‘ . DS . ‘images‘ . DS . $folder; 6 if (!is_dir($dir)) { 7 mkdir($dir,0777,true); 8 } 9 $info = $file->move($dir); 10 if($info){ 11 echo $info->getSaveName(); 12 }else{ 13 echo $file->getError(); 14 } 15 16 }
未上傳圖片界面
上傳圖片後界面
TP5 webuploader 單頁面多實例上傳圖片 案例