webuploader上传插件的使用

webuploader上传插件的使用:

    一、下载webupload

                http://fex.baidu.com/webuploader/

    二、将image-upload引入到项目中

            1、文件的引入

                    01)、public/static/js/jquery.js

                    02)、public/static/webupload/webupload.css

                    03)、public/static/webupload/style.css

                    04)、public/static/webupload/webupload.js

                    05)、public/static/webupload/upload.js

                    06)、public/static/webupload/images

            2、控制器

                    01)、在index.php中写入   webuploader方法           

      public function webuploader(){
            return view();
        }
                    02)、在index.php中写入 ajax_upload回调方法
      //获取webuploader上传的文件路径并返回给ajax
       public function ajax_upload(){
        // 获取表单上传文件
        $files = request()->file('');
       foreach($files as $file){
          // 移动到框架应用根目录/public/uploads/ 目录下
          $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
           if($info){
                // 输出 42a79759f284b767dfcb2a0197904287.jpg
                $path['name'] = 'public' . DS . 'uploads/' . $info->getSavename();
          }else{
                // 上传失败获取错误信息
                return $this->error($file->getError()) ;
            }
        }
        echo json_encode($path);
     }

            3、新建index/view/index/webupload.html

      <div id="wrapper">
        <div id="container">
            <!--头部,相册选择和格式选择-->

            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或将照片拖到这里,单次最多可选300张</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
           </div>
        </div>
     </div>

            4、修改upload.js文件

     server: '/public/index.php/index/index/ajax_upload',

猜你喜欢

转载自blog.csdn.net/shaoyanlun/article/details/80520796