这个插件对后端程序员相当友好，无论是JAVA还是PHP，抑或python,基本只需要一句代码就能完成上传并且预览的效果，先上效果图，让你们眼馋一下

废话不说，直接撸代码，前端代码如下：

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" type="text/css" href="/new/public/static/webuploader.css"><!-- 引用插件css -->
  4.     </head>
  5. <body>
  6.  
  7. <div id="uploader-demo">
  8.     <!--用来存放item-->
  9.         <div id="fileList" class="uploader-list">
  10.         </div>
  11.     <div id="filePicker">选择图片</div>
  12. </div>
  13. </body>
  14. <script type="text/javascript" src="/new/public/static/jquery-3.1.1.js"></script>  <!-- 引用jquery -->
  15. <script type="text/javascript" src="/new/public/static/webuploader.js"></script>    <!-- 引用插件js -->
  16.  
  17. <script type="text/javascript">
  18.            var $list=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼
  19.            var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
  20.            var thumbnailHeight = 100;
  21.            var uploader = WebUploader.create({
  22.             // 选完文件后，是否自动上传。
  23.            auto: true,
  24.             // swf文件路径
  25.            swf: '/new/public/static/uploader.swf', //加载swf文件，路径一定要对
  26.  
  27.             // 文件接收服务端。
  28.             server: '{:url("index/index/upload")}',
  29.  
  30.             // 选择文件的按钮。可选。
  31.             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
  32.             pick: '#filePicker',
  33.  
  34.             // 只允许选择图片文件。
  35.             accept: {
  36.                 title: 'Images',
  37.                 extensions: 'gif,jpg,jpeg,bmp,png',
  38.                 mimeTypes: 'image/'
  39.             }
  40.         });
          //上传完成事件监听
  41.         uploader.on( 'fileQueued', function(file) {
  42.             var $li = $(
  43.                     '<div id="' + file.id + '" class="file-item thumbnail">' +
  44.                         '<img>' +
  45.                         '<div class="info">' + file.name + '</div>' +
  46.                     '</div>'
  47.                     ),
  48.                 $img = $li.find('img');
  49.             // $list为容器jQuery实例
  50.                    $list.append( $li );
  51.             // 创建缩略图
  52.             // 如果为非图片文件，可以不用调用此方法。
  53.             // thumbnailWidth x thumbnailHeight 为 100 x 100
  54.             uploader.makeThumb( file, function( error, src ) {
  55.                 if ( error ) {
  56.                     $img.replaceWith('<span>不能预览</span>');
  57.                     return;
  58.                 }
  59.                 $img.attr( 'src', src );
  60.             }, thumbnailWidth, thumbnailHeight );
  61.         });
  62. </script>
  63. </html>

后端代码：

因为我是用的thinkphp5.0.7框架写的，里面封装了file类，就是完成文件的转移上传：

  1. <?php
  2. namespace app\index\controller;
  3.  
  4. use think\Controller;
  5. use think\File;
  6.  
  7. class Index  extends Controller
  8. {
  9.     public function index()
  10.     {
  11.          return $this->fetch();
  12.     }
  13.     function upload(){
  14.         $file = $this->request->file('file');//file是传文件的名称，这是webloader插件固定写入的。因为webloader插件会写入一个隐藏input，不信你们可以通过浏览器检查页面
  15.         $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
  16.     }
  17. }

撸完搞定，开森ING---------

thinkphp官网也有我本人写的文章，欢迎收藏。     http://www.thinkphp.cn/topic/46521.html

webloader上传图片详细教程/使用thinkphp5.0（原创）的更多相关文章

  1. 命令创建.net core3.0 web应用详解（超详细教程）

    原文:命令创建.net core3.0 web应用详解(超详细教程) 你是不是曾经膜拜那些敲几行代码就可以创建项目的大神,学习了命令创建项目你也可以成为大神,其实命令创建项目很简单. 1.cmd命令行 ...

  2. ThinkPHP5.0、5.1和6.0教程文档合集（免费下载）

    我们都知道ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架. ThinkPHP6主要更新了什么呢? 1. 支持PHP最新的强类型 2. PSR开发规范得了更广泛的应用 3. ...

  3. MySQL8.0.20安装教程，MySQL8.0.20安装详细图文教程

    1.下载链接如下: MySQL8.0.20版本 https://dev.mysql.com/doc/relnotes/mysql/8.0/en/news-8-0-20.html 其他版本:MySQL8 ...

  4. ThinkPHP5.0中Redis的使用和封装(原创)

    Redis是一种常用的非关系型数据库,主要用作数据缓存,数据保存形式为key-value,键值相互映射.它的数据存储跟MySQL不同,它数据存储在内存之中,所以数据读取相对而言很快,用来做高并发非常不 ...

  5. Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境（详细教程）

    Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...

  6. 转载：python + requests实现的接口自动化框架详细教程

    转自https://my.oschina.net/u/3041656/blog/820023 摘要: python + requests实现的接口自动化框架详细教程 前段时间由于公司测试方向的转型,由 ...

  7. ThinkPHP5.0 实现 app微信支付功能

    相对于之前随笔写的<ThinkPHP5.0实现app支付宝支付功能>来说,php对接app微信支付功能就相对简单的多了,最近有加我的朋友问到app微信支付,所以我把app微信支付的demo ...

  8. VMware虚拟机安装黑苹果MacOS Mojave系统详细教程

    更多资源请百度搜索:前端资源网 欢迎关注我的博客:www.w3h5.com 最近遇到一个H5页面的 iPhone X 刘海兼容问题.查到一个 XCode 编辑器,可以模拟 iPhone X 环境运行. ...

  9. 在linux下安装配置rabbitMQ详细教程

    在linux下安装配置rabbitMQ详细教程 2017年12月20日 17:34:47 阅读数:7539 安装Erlang 由于RabbitMQ依赖Erlang, 所以需要先安装Erlang. Er ...

随机推荐

  1. js调用本地office打开服务器的office文件预览

    本来是想做成直接在网页上在线预览office文件的,但是找了好多,要不是收费,要不就是要调用别人的API不安全,所以纠结了好久还是用调用本地的office预览office文件. 废话不多说,那么怎么调 ...

  2. js 给某个div增加class 样式（三种方式）

    第一种:      el.setAttribute('class','abc'); <!DOCTYPE HTML> <HTML> <HEAD> <meta c ...

  3. NIO Q&A(持续补充。。。。)

    Q:NIO是非阻塞的.但调用的selector.select()方法会阻塞.这和NIO非阻塞岂不是矛盾了? A:非阻塞指的是 IO 事件本身不阻塞,但是获取 IO 事件的 select 方法是需要阻塞 ...

  4. [洛谷P3919]【模板】可持久化数组

    题目大意:有两个操作,1:在第x次操作后的版本上修改一个值,2:查询在第x次操作后的版本上的一个节点的值 即: 你需要维护这样的一个长度为N的数组,支持如下几种操作 1.在某个历史版本上修改某一个位置 ...

  5. C++——内存使用

    内存分配方式: (1)从静态存储区域分配.内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量,static变量. (2)在栈上创建.在执行函数时,函数内局部变量的存储单 ...

  6. [poj 1743]差分+后缀数组

    题目链接:http://poj.org/problem?id=1743 首先,musical theme只与前后位置的增减关系有关,而与绝对的数值无关,因此想到做一次差分. 然后对于差分后的数组,找到 ...

  7. hbase集群写不进去数据的问题追踪过程

    hbase从集群中有8台regionserver服务器,已稳定运行了5个多月,8月15号,发现集群中4个datanode进程死了,经查原因是内存 outofMemory了(因为这几台机器上部署了spa ...

  8. OWNER：Java配置文件解决方案 使用简介

    这个感觉还是很方便的一个工具.  学习网站是:http://hao.jobbole.com/owner/ 测试步骤: 1.pom <dependency> <groupId>o ...

  9. 转：安装成功的nginx如何添加未编译安装模块

    原已经安装好的nginx,现在需要添加一个未被编译安装的模块 举例说明:安装第三方的ngx_cache_purge模块(用于清除指定URL的缓存) nginx的模块是需要重新编译nginx,而不是像a ...

  10. POJ 2456 Aggressive cows---二分搜索法

    ///3.最大化最小值 /** POJ 2456 Aggressive cows Q:一排牛舍有N (2 <= N <= 100,000) 个,位置为x1,...,xN (0 <= ...