Explication détaillée des étapes pour télécharger plusieurs images à l'aide de Bootstrap+PHP-tutoriel php-php.cn

Explication détaillée des étapes pour télécharger plusieurs images à l'aide de Bootstrap+PHP

PHPz

Libérer： 2023-03-26 08:22:02

original

2851 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes pour télécharger plusieurs images à l'aide de Bootstrap+PHP. Quelles sont les précautions à prendre pour télécharger plusieurs images à l'aide de Bootstrap+PHP ? Ce qui suit est un cas pratique, examinons-le ? [Recommandations vidéo associées : Tutoriel Bootstrap]

L'interface d'utilisation de bootstrap est belle, prévisualisable, téléchargeable par glisser-déposer et peut être téléchargée de manière asynchrone ou synchrone avec ajax. Voici le rendu :

Code frontal : 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>

Copier après la connexion

Code back-end :

 /*
 * 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();
  }
 }

Copier après la connexion

Je pense que vous lirez le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour PHP+Session pour empêcher l'envoi répété de formulaires

Outil de mise en cache PHP Analyse des cas d'installation et d'utilisation de XCache

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!