在使用 webuploader上传文件过程中，如果同一个页面存在多个上传区域，可以参考本示例代码。

HTML 代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>{:config('WEB_SITE_TITLE')}</title>

     <link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

     <link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

     <link href="/static/admin/css/animate.min.css" rel="stylesheet">

     <link href="/static/admin/css/plugins/switchery/switchery.css" rel="stylesheet">

     <link href="/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet">

     <link href="/static/admin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

 </head>

 <link rel="stylesheet" type="text/css" href="/static/admin/webupload/webuploader.css">

 <link rel="stylesheet" type="text/css" href="/static/admin/webupload/style.css">

 <body class="gray-bg">

 <div class="wrapper wrapper-content animated fadeInRight">

     <div class="row">

         <div class="col-sm-12">

             <div class="ibox float-e-margins">

                 <div class="ibox-content">

                     <form class="form-horizontal m-t" name="add" id="add" method="post" action="add_game_role">

                         <div class="hr-line-dashed"></div>

                         <div class="form-group">

                             <label class="col-sm-3 control-label">图片1：</label>

                             <div class="input-group col-sm-4">

                                 <input type="hidden" id="data_photo" name="role_big_pic" >

                                 <div id="bigFileList" class="uploader-list" style="float:right"></div>

                                 <div style="float:left" ><span onClick="webUpload('bigFileList')" class="uploadImg" >选择图片</span></div>

                                 <img id="img_data" height="100px" style="float:left;margin-left: 50px;margin-top: -10px;" src="/static/admin/images/no_img.jpg"/>

                             </div>

                         </div>

                         <div class="hr-line-dashed"></div>

                        <div class="form-group">

                            <label class="col-sm-3 control-label">图片2：</label>

                            <div class="input-group col-sm-4">

                                <input type="hidden" id="data_photo" name="role_min_pic" >

                                <div id="minFileList" class="uploader-list" style="float:right"></div>

                                <div style="float:left" ><span onClick="webUpload('minFileList')" class="uploadImg" >选择图片</span></div>

                                <img id="img_data" height="100px" style="float:left;margin-left: 50px;margin-top: -10px;" src="/static/admin/images/no_img.jpg"/>

                            </div>

                        </div>

                         <div class="hr-line-dashed"></div>

                         <div class="form-group">

                             <div class="col-sm-4 col-sm-offset-3">

                                 <button class="btn btn-primary" type="submit"><i class="fa fa-save"></i> 保存</button>&nbsp;&nbsp;&nbsp;

                                 <a class="btn btn-danger" href="javascript:history.go(-1);"><i class="fa fa-close"></i> 返回</a>

                             </div>

                         </div>

                     </form>

                 </div>

             </div>

         </div>

     </div>

 </div>

 <script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script>

 <script type="text/javascript">

     var list;

     function webUpload(id) {

         list = $('#'+id);

         console.log(id)

     }

     //上传图片,初始化WebUploader

     var uploader = WebUploader.create({

         auto: true,// 选完文件后，是否自动上传。

         swf: '/static/admin/js/webupload/Uploader.swf',// swf文件路径

         server: "{:url('Upload/uploadPlus', ['folder'=> 'gamerole'])}",// 文件接收服务端。

         duplicate :true,// 重复上传图片，true为可重复false为不可重复

         pick: '.uploadImg',// 选择文件的按钮。可选。

         accept: {

             title: 'Images',

             extensions: 'gif,jpg,jpeg,bmp,png',

             mimeTypes: 'image/jpg,image/jpeg,image/png'

         },

         'onUploadSuccess': function(file, data, response) {

             list.prev().val('gamerole/' + data._raw);    // 实际保存的图片地址字符串

             list.next().next().attr('src', '/uploads/images/gamerole/' + data._raw).show(); // 显示新上传的图片

         }

     });

     uploader.on( 'fileQueued', function( file ) {

         list.html( '<div id="' + file.id + '" class="item">' +

             '<h4 class="info">' + file.name + '</h4>' +

             '<p class="state">正在上传...</p>' +

             '</div>' );    // 显示图片名称

     });

     // 文件上传成功

     uploader.on( 'uploadSuccess', function( file ) {

         $( '#'+file.id ).find('p.state').text('上传成功！');

     });

     // 文件上传失败，显示上传出错。

     uploader.on( 'uploadError', function( file ) {

         $( '#'+file.id ).find('p.state').text('上传出错!');

     });

 </script>

 </body>

 </html>

服务端 PHP 代码：

  //  图片上传

     public function uploadPlus() {

         $file = request()->file('file');

         $folder = input('param.folder');

         $dir = ROOT_PATH . 'public' . DS . 'uploads' . DS . 'images' . DS . $folder;

         if (!is_dir($dir)) {

             mkdir($dir,0777,true);

         }

         $info = $file->move($dir);

         if($info){

             echo $info->getSaveName();

         }else{

             echo $file->getError();

         }

     }

未上传图片界面

上传图片后界面

TP5 webuploader 单页面多实例上传图片 案例的更多相关文章

  1. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  2. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  3. 新手vue构建单页面应用实例

    本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请 ...

  4. 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【干货】Laravel --Validate (表单验证) 使用实例

    前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...

  6. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  7. SpringMVC上传图片总结（2）--- 使用百度webuploader上传组件进行上传图片

    SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片   在上一篇文章中,我们介绍了< SpringMVC上传图片的常规上传方法 >.本文接着第一 ...

  8. vue第十四单元(认识单页面应用，理解vue-router的基本用法)

    第十四单元(认识单页面应用,理解vue-router的基本用法) #课程目标 1.了解单页应用与多页应用以及各自的优缺点 2.掌握路由如何实现单页应用 3.精通路由的基本语法 #知识点 #一.单页应用 ...

  9. vue 单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA ...

随机推荐

  1. 设置checkbox只读

    1.checkbox没有readonly属性,所以在checkbox添加readonly属性是没有作用的. <input type="checkbox" readonly=& ...

  2. ArrayList、Vector、HashMap、HashSet

    1. list  和 set 的有序无序是否可重复 List是有序可重复的: Set是无序不可重复的: 2.ArrayList.Vector.HashMap.HashSet的默认初始容量.加载因子.扩 ...

  3. 根据tomcat日志查找想要的错误日志

    1.首先要记得程序报的错误信息 我的错误信息是[2015接收的参数中有空值],对应程序中的返回值是2015 以及出现错误信息的大致时间,我的大概是吃过午饭后,12:40-13:20之间 2.先去log ...

  4. CSS的框模型(div)与边距（margin、padding）

    所谓框模型,例如div标签,你就可以直接把它理解成一个相框. 这个相框里面的相片有高度和宽度,框本身也有一定的宽度.相框和别的相框之间,还有一定的边距. div设置常见属性 border:边框 pad ...

  5. SublimeText插件eslint : 语法检测

    参考: http://www.tuicool.com/articles/faANRvj 安装之后的效果: 误用了 = ,在文件保存时就会被提示,直接顺手改掉就行了,方便的不行 步骤1:Sublime集 ...

  6. Refactoring in Coding

    Make changes on existing code for subsequent and constant changes of requirement. Reference:http://w ...

  7. Conferences

    中国学术会议在线 :http://www.meeting.edu.cn 中国会议网: http://www.chinameeting.com 香山科学会议:http://www.xssc.ac.cn/ ...

  8. 初看Mybatis 源码 （二） Java动态代理类

    先抛出一个问题,用过Mybatis的都知道,我们只需要定义一个Dao的接口,在里面写上一些CRUD相关操作,然后配置一下sql映射文件,就可以达到调用接口中的方法,然后执行sql语句的效果,为什么呢? ...

  9. 学习笔记_TCP编程，服务端

    public void startTcpService(String ip) { try { InetAddress ipAddress = InetAddress.getByName(ip); tc ...

  10. 探讨下在Delphi里面进程之间的数据共享

    进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动.它是操作系统动态执行的基本单元,在传统的操作系统中,进程既是基本的分配单元,也是基本的执行单元.现在小编就和大家来探讨一下在Delphi ...