Bootstrap+PHP实现多图上传

插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231
下面是根据下载的demo进行补充：
使用bootstrap界面美观，可预览，可拖拽上传，可配合ajax异步或同步上传，下面是效果图：

前端代码：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="stylesheet"><link href="/public/index/fileinput/css/fileinput.css" 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();}}

转载于:https://www.cnblogs.com/zxf100/p/8745698.html

Bootstrap+PHP实现多图上传相关推荐

Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231 下面是根据下载的demo进行补充: 使用bootstrap界面美观,可预览,可拖拽上传,可配合aja ...
php 多图上传编辑器,laravel中使用WangEditor及多图上传
1. 创建项目及安装所需安装包 1.1 创建项目 composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist 1 ...
php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用
作者:白狼出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
HTML5 原生API input file 来实现多图上传，并大图预览
闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...
.net MVC5+EF6+bootstrap搭建框架，从入门到精通（三）——之（Bootstrap Fileinput）多图片上传
.net MVC5+EF6+bootstrap搭建框架,从入门到精通(三)--之(Bootstrap Fileinput)多图片上传前言废话 .net mvc 实战多图片上传前言废话人生最大的b ...
微信jssdk，实现多图上传的一点心得
一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...
微信小程序多图上传带进度提示的代码实例
实例名称:多图上传进度提示适用范围:微信小程序基础库1.0.1及以上 page.js中书写代码片段如下 Page({data:{src:''},//上传事件upImage(e){wx.choose ...
小程序 | 微信小程序多图上传（点击上传、可修改删除与放大回显）
微信小程序实现多图上传需求文章目录基本图片处理 index.js(选择上传.点击回显.修改删除) index.js(实现循环多图上传数据库) 公共组件utils utils/common.util ...
微信小程序多图上传解决方案
为了使代码体积小我这里将多图上传封装到单独的一个js 页面的js调用他 // pages/home/home.jsvar upload = require('../../style/upload. ...

Bootstrap+PHP实现多图上传

Bootstrap+PHP实现多图上传相关推荐

最新文章

热门文章