温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何在PHP中使用Bootstrap实现多图上传功能

发布时间:2021-02-07 21:31:35 来源:亿速云 阅读:270 作者:Leah 栏目:开发技术

本篇文章为大家展示了如何在PHP中使用Bootstrap实现多图上传功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

前端代码: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>   <div class="container kv-main">       <br>    <form enctype="multipart/form-data">         <div class="form-group">      <!-- 初始化插件 -->      <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" name="images">     </div>         </form>   </div>  </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中使用Bootstrap实现多图上传功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI