这篇文章主要介绍了TP5 基于bootstrap实现多图上传插件,需要的朋友可以参考下

1----引入js文件和css文件

1. <!--图片上传--> 
2. <link href="/public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> 
3. <link href="/public/static/css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css" /> 
4. <script src="/public/static/js/jquery-2.0.3.min.js"></script> 
5. <script src="/public/static/js/fileinput.js" type="text/javascript"></script> 
6. <script src="/public/static/js/fileinput_locale_de.js" type="text/javascript"></script> 
7. <script src="/public/static/js/bootstrap.min.js" type="text/javascript"></script> 

2-html代码

1. <div class="form-group"> 
2. <label for="inputEmail3" class="col-sm-2 control-label">多图上传</label> 
3. <div class="col-sm-10"> 
4. <input id="file-0" type="file" multiple class="file" name="path[]" > 
5. </div> 
6. </div> 

3-控制器

1. public function add() { 
2. //多图上传 
3. $arryFile = $request->file("path"); 
4. foreach ($arryFile as $File){ 
5.   $pathImg=""; 
6.  //移动文件到框架应用更目录的public/uploads/ 
7.   $info = $File->move(ROOT_PATH . 'public' . DS . 'upload' . DS . 'top_bar' . DS . date('Y') . DS . date('m-d'),md5(microtime(true))); 
8.   if ($info) { 
9.    $pathImg = "/public/upload/top_bar/" . date('Y') . '/' . date('m-d') . '/' . $info->getFilename(); 
10.   } else { 
11.    //错误提示用户 
12.    return $this->error($File->getError()); 
13.   } 
14.   $result["path"] = $pathImg; 
15.   $result["top_bar_id"]=$dataId; 
16.   Db::name('top_path')->insert($result); 
17.  }

Tags: bootstrap TP5多图上传

分享到：