webuploader 实现文件上传

参考网址：http://fex.baidu.com/webuploader/

首先下载webuploader，将文件夹放进public目录下

然后引入js和css：

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">

<!--引入Jquery--> 
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<!--引入JS--> 
<script type="text/javascript" src="/webuploader/webuploader.js"></script>

HTML:

<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>

Script:

var uploader = WebUploader.create({
        // swf文件路径
        swf: 'webuploader/Uploader.swf',
        // 文件接收服务端。
        server: "{:url('uploader')}",
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        // 选完文件后，是否自动上传。
        auto:true,
        // 图片name
        fileVal:'img',
        // 单文件
        multiple:false,
        compress : {
            width: 100,
            height: 100,
            compressSize: 0
        }
    });
    uploader.on( 'uploadSuccess', function( file,res ) {
        $('#file').val(res.path)
    });

PHP:

 public function uploader(){
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('img');

        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                $filepath = '/uploads/'. $info->getSaveName();
                // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
                return json(['code'=>200,'msg'=>'success','path'=>$filepath]);
            }else{
                // 上传失败获取错误信息
                echo $file->getError();
            }
        }
    }