Laravel5文件上傳默認只能上傳一張圖片,但是有的時候我們需要一次性上傳多圖就不行了,我在網上看了很多關於laravel5圖片上傳的文章,很多都只是介紹laravel5單圖上傳,多圖片上傳介紹少之有少,今天分享一篇關於laravrl5多圖上傳文章,代碼邏輯設計可能不完美,但功能實現了。希望對大家有所幫助!
前端代碼:
注意:<input type="file" class="default" name="img[]" />
<!------bootstrap-fileupload.min.js 圖片上插件-------> <link href="{{url('Admin/css/bootstrap-fileupload.min.css')}}" rel="stylesheet"> <script src="{{url('Admin/js/bootstrap-fileupload.min.js')}}"></script> <!------上傳正面圖片 start-------> <div class="form-group last"> <label class="control-label col-md-2">選擇圖片 <i style="color: red;">*</i></label> <div class="col-md-9"> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="fileupload-new thumbnail" style="width: 210px; height: 150px;"> <img src="{{url('Admin/images/23.jpg')}}" alt="" /> </div> <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div> <div> <span class="btn btn-default btn-file"> <span class="fileupload-new"><i class="fa fa-paper-clip"></i> 上傳圖片</span> <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span> <input type="file" class="default" name="img[]" /> <!--<input type="hidden" class="default" name="old-img" value="{$data.img}" />--> </span> <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> 刪除</a> </div> </div> </div> </div> <!------上傳正面圖片 end-------> <!------上傳背面圖片 start-----> <div class="form-group last"> <label class="control-label col-md-2">選擇圖片 <i style="color: red;">*</i></label> <div class="col-md-9"> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="fileupload-new thumbnail" style="width: 210px; height: 150px;"> <img src="{{url('Admin/images/23.jpg')}}" alt="" /> </div> <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div> <div> <span class="btn btn-default btn-file"> <span class="fileupload-new"><i class="fa fa-paper-clip"></i> 上傳圖片</span> <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span> <input type="file" class="default" name="img[]" /> <!--<input type="hidden" class="default" name="old-img" value="{$data.img}" />--> </span> <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> 刪除</a> </div> </div> </div> </div> <!------上傳背面圖片 end------->
Laravel5單圖上傳:
public function upload(Request $request) { //判斷請求中是否包含name=img的上傳文件 if (!$request->hasFile('img')) { exit("請選擇上傳圖片, <a href=''>返回上一頁!</a>"); } // 判斷圖片上傳中是否出錯 $file = $request->file('img'); if (!$file->isValid()) { exit("上傳圖片出錯,請重試,<a href=''>返回上一頁!</a>"); } //$img_path = $file -> getRealPath(); // 獲取臨時圖片絕對路徑 $entension = $file -> getClientOriginalExtension(); // 上傳文件后綴 $filename = date('YmdHis').mt_rand(100,999).'.'.$entension; // 重命名圖片 $date = date('Y-m-d'); $path = $file->move(public_path().'/uploads/'.$date.'/',$filename); // 重命名保存 $img_path = 'uploads/'.$date.'/'.$filename; return $img_path; }
Laravel5多圖上傳:
其實多圖片上傳就是多了一個foreach循環
public function upload(Request $request){ $file = $request->file('img'); $filePath =[]; // 定義空數組用來存放圖片路徑 foreach ($file as $key => $value) { // 判斷圖片上傳中是否出錯 if (!$value->isValid()) { exit("上傳圖片出錯,請重試!"); } if(!empty($value)){//此處防止沒有多文件上傳的情況 $allowed_extensions = ["png", "jpg", "gif"]; if ($value->getClientOriginalExtension() && !in_array($value->getClientOriginalExtension(), $allowed_extensions)) { exit('您只能上傳PNG、JPG或GIF格式的圖片!'); } $destinationPath = '/uploads/'.date('Y-m-d'); // public文件夾下面uploads/xxxx-xx-xx 建文件夾 $extension = $value->getClientOriginalExtension(); // 上傳文件后綴 $fileName = date('YmdHis').mt_rand(100,999).'.'.$extension; // 重命名 $value->move(public_path().$destinationPath, $fileName); // 保存圖片 $filePath[] = $destinationPath.'/'.$fileName; } } // 返回上傳圖片路徑,用於保存到數據庫中 return $filePath; }