Detaillierte Erläuterung der Schritte zum Hochladen mehrerer Bilder mit Bootstrap+PHP-PHP-Tutorial-php.cn

Detaillierte Erläuterung der Schritte zum Hochladen mehrerer Bilder mit Bootstrap+PHP

PHPz

Freigeben： 2023-03-26 08:22:02

Original

2912 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zum Hochladen mehrerer Bilder mit Bootstrap+PHP ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für das Hochladen mehrerer Bilder mit Bootstrap+PHP? Das Folgende ist ein praktischer Fall, schauen wir uns das an [Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

Die Benutzeroberfläche für die Verwendung von Bootstrap ist schön, in der Vorschau sichtbar, per Drag-and-Drop hochladbar und kann asynchron oder synchron hochgeladen werden mit Ajax. Das Folgende ist das Rendering:

Front-End-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 = $('#'+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=&#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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte für PHP+Session, um wiederholte Formularübermittlungen zu verhindern

PHP-Caching-Tool XCache-Installation und Anwendungsfallanalyse

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Hochladen mehrerer Bilder mit Bootstrap+PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!