TP5 webuploader 单页面多实例上传图片案例

超、凢脫俗 2021-12-22 15:34 221阅读 0赞

在使用 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     }

未上传图片界面

![1258343-20190129092539480-1111782054.png][]

上传图片后界面

![1258343-20190129092526236-1890563710.png][]

转载于:https://www.cnblogs.com/whx-blogs/p/10332610.html

[1258343-20190129092539480-1111782054.png]: /images/20211220/391202549e6e4aa6b00f4d3b37634f30.png
[1258343-20190129092526236-1890563710.png]: /images/20211220/b69d8451a74942fab11d3596207184a5.png