Beispiel für die Implementierung der Funktion zum Hochladen mehrerer Bilder mit Bootstrap und PHP-PHP-Tutorial-php.cn

Beispiel für die Implementierung der Funktion zum Hochladen mehrerer Bilder mit Bootstrap und PHP

不言

Freigeben： 2023-03-23 11:02:01

Original

1688 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Inhalt von Bootstrap und PHP zur Implementierung der Multi-Image-Upload-Funktion vorgestellt. Dieser Artikel teilt Ihnen diesen Teil des Inhalts in Form einer Kombination aus Bildern und Beispielen mit dazu

Die Bootstrap-Schnittstelle ist wunderschön, kann in der Vorschau angezeigt, gezogen und hochgeladen werden und kann asynchron oder synchron mit Ajax hochgeladen werden. Das Folgende ist das Rendering:

Frontend-Code: 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 = $(&#39;#&#39;+ctrlName);
  control.fileinput({
   language: &#39;zh&#39;, //设置语言
   uploadUrl:uploadUrl, //上传的地址
   allowedFileExtensions:[&#39;jpg&#39;,&#39;png&#39;], //接收的文件后缀
   showUpload:true, //是否显示上传按钮
   showCaption:false, //是否显示标题
   maxFileSize: 1000, //图片最大尺寸kb 为0不限制
   maxFilesNum: 3,  //最多上传图片
   overwriteInitial: false,//不覆盖已上传的图片
   browseClass: "btn btn-info", //按钮样式 
   dropZoneEnabled: true,//是否显示拖拽区域
   previewFileIcon: "<i class=&#39;glyphicon glyphicon-king&#39;></i>",
   msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
  });
 }
 //初始化fileinput控件,第一次初始化 (控件id，上传地址)
 initFileInput("file-1", "uploadImg");

 // 监听事件
 $("#file-1").on("fileuploaded", function (event, data, previewId, index) {
  // 上传地址
  console.log(data);
 });
 </script>
</html>

Nach dem Login kopieren

Zurück -Endcode:

 /*
 * bootst多图上传
 */
 public function fileinput()
 {
  return $this->fetch();
 }
 public function uploadImg()
 {
  // var_dump($_FILES);
  // 获取表单上传文件 
  $file = request()->file(&#39;images&#39;);
  // 移动到框架应用根目录/public/uploads/img 目录下
  $info = $file->move(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads/img&#39;);
  if($info){
   // 成功上传后 获取上传信息
   $data[&#39;response&#39;] = $info->getSaveName();
   return json($data);
   //图片上传成功，以下可对数据库操作
   // ......
  }else{
   // 上传失败获取错误信息
   echo $file->getError();
  }
 }

Nach dem Login kopieren

Verwandte Empfehlungen:

So wählen Sie den Datumsbereich für das DatePicker-Attribut von Bootstrap aus

php implementiert eine einfache Methode zum Synthetisieren von Bildern

Das obige ist der detaillierte Inhalt vonBeispiel für die Implementierung der Funktion zum Hochladen mehrerer Bilder mit Bootstrap und PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!