webloader上传图片详细教程/使用thinkphp5.0（原创）

这个插件对后端程序员相当友好，无论是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