• 售前

  • 售后

热门帖子
入门百科

Bootstrap+PHP实现多图上传功能实例详解

[复制链接]
安静的小女子 显示全部楼层 发表于 2021-10-25 19:50:53 |阅读模式 打印 上一主题 下一主题
使用bootstrap界面雅观,可预览,可拖拽上传,可共同ajax异步或同步上传,下面是效果图:


前端代码:fileinput.html
  1. <!DOCTYPE html>
  2. <!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8"/>
  6.   <title>bootstrap多图上传</title>
  7.   <link href="/public/index/fileinput/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  8.   <link href="/public/index/fileinput/css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css" />
  9.   <script src="/public/index/fileinput/js/jquery-2.0.3.min.js"></script>
  10.   <script src="/public/index/fileinput/js/fileinput.js" type="text/javascript"></script>
  11.   <script src="/public/index/fileinput/js/bootstrap.min.js" type="text/javascript"></script>
  12.   <!-- 中文化 -->
  13.   <script src="/public/index/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
  14. </head>
  15. <body>
  16.   <div class="container kv-main">   
  17.    <br>
  18.    <form enctype="multipart/form-data">   
  19.     <div class="form-group">
  20.      <!-- 初始化插件 -->
  21.      <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" name="images">
  22.     </div>
  23.    
  24.    </form>
  25.   </div>
  26. </body>
  27. <script>
  28. // 初始化filleinput控件 第一次初始化
  29. function initFileInput(ctrlName, uploadUrl){
  30.   var control = $('#'+ctrlName);
  31.   control.fileinput({
  32.    language: 'zh', //设置语言
  33.    uploadUrl:uploadUrl, //上传的地址
  34.    allowedFileExtensions:['jpg','png'], //接收的文件后缀
  35.    showUpload:true, //是否显示上传按钮
  36.    showCaption:false, //是否显示标题
  37.    maxFileSize: 1000, //图片最大尺寸kb 为0不限制
  38.    maxFilesNum: 3,  //最多上传图片
  39.    overwriteInitial: false,//不覆盖已上传的图片
  40.    browseClass: "btn btn-info", //按钮样式
  41.    dropZoneEnabled: true,//是否显示拖拽区域
  42.    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
  43.    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
  44.   });
  45. }
  46. //初始化fileinput控件,第一次初始化 (控件id,上传地址)
  47. initFileInput("file-1", "uploadImg");
  48. // 监听事件
  49. $("#file-1").on("fileuploaded", function (event, data, previewId, index) {
  50.   // 上传地址
  51.   console.log(data);
  52. });
  53. </script>
  54. </html>
复制代码
背景代码:
  1. /*
  2. * bootst多图上传
  3. */
  4. public function fileinput()
  5. {
  6.   return $this->fetch();
  7. }
  8. public function uploadImg()
  9. {
  10.   // var_dump($_FILES);
  11.   // 获取表单上传文件
  12.   $file = request()->file('images');
  13.   // 移动到框架应用根目录/public/uploads/img 目录下
  14.   $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/img');
  15.   if($info){
  16.    // 成功上传后 获取上传信息
  17.    $data['response'] = $info->getSaveName();
  18.    return json($data);
  19.    //图片上传成功,以下可对数据库操作
  20.    // ......
  21.   }else{
  22.    // 上传失败获取错误信息
  23.    echo $file->getError();
  24.   }
  25. }
复制代码
总结
以上所述是小编给各人先容的Bootstrap+PHP实现多图上传功能实例详解,希望对各人有所资助,如果各人有任何疑问请给我留言,小编会实时回复各人的。在此也非常感谢各人对脚本之家网站的支持!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作