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 

posted @ 2017-03-03 14:34  山上小和尚  阅读(3189)  评论(0)  编辑  收藏  举报