在使用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 单页面多实例上传图片 案例
原文地址：https://www.cnblogs.com/whx-blogs/p/10332610.html