在使用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 }
未上传图片界面
上传图片后界面
