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

最新推荐文章于 2021-03-09 19:01:51 发布

weixin_33696822

最新推荐文章于 2021-03-09 19:01:51 发布

阅读量180

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/whx-blogs/p/10332610.html

版权

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

未上传图片界面

上传图片后界面

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

weixin_33696822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TP5 webuploader 单页面多实例上传图片案例

在使用 webuploader上传文件过程中，如果同一个页面存在多个上传区域，可以参考本示例代码。HTML 代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" con...
复制链接

扫一扫