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
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',