TP5 webuploader 单页面多实例上传图片 案例
Posted Blogs-whx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TP5 webuploader 单页面多实例上传图片 案例相关的知识，希望对你有一定的参考价值。
在使用 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 单页面多实例上传图片 案例的主要内容，如果未能解决你的问题，请参考以下文章