在https://github.com/fex-team/webuploader 下载webuploader并解压，

解压后放到public里面。其中我把解压缩后的文件夹改名为webuploader，放到了public/static/文件夹下。

将你放到public下的webuploader文件夹中的examples/imageupload/index.html复制到在对应需要文件上传功能的视图文件夹下面

将其中的css和js文件路径进行替换，ThinkPHP5.0中 __STATIC__直接指向了项目下的public/static文件下

下面这里的有点长，如果需要知道哪段是自己添加的 可搜索 ‘自己添加的’

这几个字，有注释的

    
             
         
     
     
     
         
               
          
     
     
    
      
        
               
       
            
        
                
         
                    
          
                    
          
或将照片拖到这里，单次最多可选300张
                
         
            
        
            
        
                
         
                    
          0%                    
                          
         
         
                
         
                    
          
          
           开始上传
          
                
         
            
        
        
       
    
      
     

如果直接引入的upload.js,而不是直接粘过来的话

就需要找到webuploader/examples/imageupload/upload.js文件，在第154行，或者搜索server，将后台地址改为你想要的地址（其实就是指的文件上传的方法的地址），我的改成了’imgupload’ 注意经过我多次试验，’{:url(“”)}’助手函数不会被解析，这里不能使用。

效果：

 

文件上传的后台方法

将ThinkPHP5文档中关于图片上传的代码写进去，将请求的名称改成file。

public function imgupload()    {         $file = request()->file('file');       // 移动到框架应用根目录/public/uploads/ 目录下           $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');          if($info){               // 成功上传后 获取上传信息               // 输出 jpg                             $data['path']=str_replace('\\',"/","/uploads/".$info->getSaveName());                                 return json_encode($data['path']);//把路径ajax用json方式返回到视图中                          }else{               // 上传失败获取错误信息               echo $file->getError();           }                          }

具体上传到那个文件夹、上传大小类型后缀的验证、文件的命名规则等，根据自己需要进行书写。注意这里虽然是多图上传，但上传时候的循环已经被插件封装好了，不需要我们使用多图上传中的循环方式进行上传。

上传界面如下

提交了，打印出来的路径

要改这个插件的大小和位置的话在style.css里的#wrapper里margin的属性值和witch的属性值，具体大小自己调。