Bootstrap+PHP實現多圖上傳步驟詳解

最後更新：2018-05-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這次給大家帶來Bootstrap+PHP實現多圖上傳步驟詳解，Bootstrap+PHP實現多圖上傳的注意事項有哪些，下面就是實戰案例，一起來看一下。

使用bootstrap介面美觀，可預覽，可拖拽上傳，可配合ajax非同步或同步上傳，下面是：

前端代碼：fileinput.html

<!DOCTYPE html><!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran --><html lang="en"> <head>  <meta charset="UTF-8"/>  <title>bootstrap多圖上傳</title>  <link href="/public/index/fileinput/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">  <link href="/public/index/fileinput/css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css" />  <script src="/public/index/fileinput/js/jquery-2.0.3.min.js"></script>  <script src="/public/index/fileinput/js/fileinput.js" type="text/javascript"></script>  <script src="/public/index/fileinput/js/bootstrap.min.js" type="text/javascript"></script>  <!-- 中文化 -->  <script src="/public/index/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script> </head> <body>  <p class="container kv-main">      <br>   <form enctype="multipart/form-data">        <p class="form-group">     <!-- 初始化外掛程式 -->     <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" name="images">    </p>       </form>  </p> </body> <script> // 初始化filleinput控制項 第一次初始化 function initFileInput(ctrlName, uploadUrl){  var control = $('#'+ctrlName);  control.fileinput({   language: 'zh', //設定語言   uploadUrl:uploadUrl, //上傳的地址   allowedFileExtensions:['jpg','png'], //接收的檔案尾碼   showUpload:true, //是否顯示上傳按鈕   showCaption:false, //是否顯示標題   maxFileSize: 1000, //圖片最大尺寸kb 為0不限制   maxFilesNum: 3,  //最多上傳圖片   overwriteInitial: false,//不覆蓋已上傳的圖片   browseClass: "btn btn-info", //按鈕樣式    dropZoneEnabled: true,//是否顯示拖拽地區   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",   msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！",  }); } //初始化fileinput控制項,第一次初始化 (控制項id，上傳地址) initFileInput("file-1", "uploadImg"); // 監聽事件 $("#file-1").on("fileuploaded", function (event, data, previewId, index) {  // 上傳地址  console.log(data); }); </script></html>

後台代碼：

 /* * bootst多圖上傳 */ public function fileinput() {  return $this->fetch(); } public function uploadImg() {  // var_dump($_FILES);  // 擷取表單上傳檔案   $file = request()->file('images');  // 移動到架構應用根目錄/public/uploads/img 目錄下  $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/img');  if($info){   // 成功上傳後 擷取上傳資訊   $data['response'] = $info->getSaveName();   return json($data);   //圖片上傳成功，以下可對資料庫操作   // ......  }else{   // 上傳失敗擷取錯誤資訊   echo $file->getError();  } }

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More