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

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

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="/new/public/static/webuploader.css"><!-- 引用插件css -->

    </head>

<body>

<div id="uploader-demo">

    <!--用来存放item-->

        <div id="fileList" class="uploader-list">

        </div>

    <div id="filePicker">选择图片</div>

</div>

</body>

<script type="text/javascript" src="/new/public/static/jquery-3.1.1.js"></script>  <!-- 引用jquery -->

<script type="text/javascript" src="/new/public/static/webuploader.js"></script>    <!-- 引用插件js -->

<script type="text/javascript">

           var $list=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼

           var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档

           var thumbnailHeight = 100;

           var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。

           auto: true,

            // swf文件路径

           swf: '/new/public/static/uploader.swf', //加载swf文件，路径一定要对

            // 文件接收服务端。

            server: '{:url("index/index/upload")}',

            // 选择文件的按钮。可选。

            // 内部根据当前运行是创建，可能是input元素，也可能是flash.

            pick: '#filePicker',

            // 只允许选择图片文件。

            accept: {

                title: 'Images',

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

                mimeTypes: 'image/'

            }

        });
      //上传完成事件监听

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

            var $li = $(

                    '<div id="' + file.id + '" class="file-item thumbnail">' +

                        '<img>' +

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

                    '</div>'

                    ),

                $img = $li.find('img');

            // $list为容器jQuery实例

                   $list.append( $li );

            // 创建缩略图

            // 如果为非图片文件，可以不用调用此方法。

            // thumbnailWidth x thumbnailHeight 为 100 x 100

            uploader.makeThumb( file, function( error, src ) {

                if ( error ) {

                    $img.replaceWith('<span>不能预览</span>');

                    return;

                }

                $img.attr( 'src', src );

            }, thumbnailWidth, thumbnailHeight );

        });

</script>

</html>

后端代码：

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

<?php

namespace app\index\controller;

use think\Controller;

use think\File;

class Index  extends Controller

{

    public function index()

    {

         return $this->fetch();

    }

    function upload(){

        $file = $this->request->file('file');//file是传文件的名称，这是webloader插件固定写入的。因为webloader插件会写入一个隐藏input，不信你们可以通过浏览器检查页面

        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

    }

}

撸完搞定，开森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. PokeCats开发者日志（五）

      现在是PokeCats游戏开发的第八天的上午,来记录一下将PokeCats上传到360移动开放平台的过程.   首先点创建游戏.   会弹出这个东东.   个人只能创建免费游戏啊,TAT.算了,反 ...

  2. [LeetCode] 70. Climbing Stairs（斐波那契数列）

    [思路] a.因为两种跳法,1阶或者2阶,那么假定第一次跳的是一阶,那么剩下的是n-1个台阶,跳法是f(n-1); b.假定第一次跳的是2阶,那么剩下的是n-2个台阶,跳法是f(n-2) c.由a.b ...

  3. CF115B Lawnmower

    题目描述 You have a garden consisting entirely of grass and weeds. Your garden is described by an n×mn×m ...

  4. 机器学习：最近邻规则KNN算法

    这个算法就比较简单易懂了 就是把每个向量的特征值抽象成坐标,寻找最近的k个点,来进行划分 代码如下 #include <iostream> #include <cstdio> ...

  5. requestAnimationFrame实现一帧的函数节流

    用一个变量判断raf的回调是否已经执行了,已经执行了说明过了一帧,通常是16.7ms,达到了函数节流一帧的目的. var locked = false; window.addEventListense ...

  6. [hdu 3949]线性基+高斯消元

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3949 一开始给做出来的线性基wa了很久,最后加了一步高斯消元就过了. 之所以可以这样做,证明如下. 首 ...

  7. HDU3488：Tour（KM算法）

    Tour Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submis ...

  8. 有关eclipse的内存溢出问题

    一:前言 最近在做的项目在启动tomcat时就报“内存溢出的错误”,其实也不是自己第一次遇到,但是每次都是在网上查询后敲进去,所以这次我觉得自己记载下来吧. 二:内容 我自己的配置大小,这里的配置位置 ...

  9. POST提交数据太大

    2018.4.8号更新 其实后来最终的解决方案是修改服务器的配置文件. POST数据按道理说是没有大小限制的,只是取决于浏览器或服务器的配置,tomcat的解决方式参考方案2. ----------- ...

  10. Java序列化与反序列化是什么？为什么需要序列化与反序列化？如何实现Java序列化与反序列化？

    Java序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java序列化与反序列化?本文围绕这些问题进行了探讨.  1.Java序列化与反序列化  Java序列化是指把Java对象转换为字节 ...