Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传

插件及源代码可以在这里下载 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/SofuBlue/p/9716746.html

Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传相关推荐

ajax值上传不过去,ajax上传时参数提交不更新等相关问题
先前,我从网上下载了一个jQuery的Ajax上传插件,网页的左侧是上传分类,想要实现的一个功能是如此这样的:我本来是打算在服务端根据上传分类建立不同的文件夹来保存文件的,因此这个就需要传一个上传分类 ...
ajax js图片上传到php,Ajax上传并预览图片（附代码）
这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上 ...
ajax文件上传重置,通过ajax上传文件时的ERR_CONNECTION_RESET
当我使用jquery发送ajax请求上传文件时,我得到了#34; ERR_CONNECTION_RESET" 120秒后总是.所以,我决定在控制台中显示上传的进度,并且我惊讶地每30/40秒 ...
ajax 上传文件 400,AJAX上传文件
//这是一般处理程序处理的代码: public void ProcessRequest(HttpContext context) 2 { 3 string img = context.Request. ...
上传html 0字节,HTML ajax 上传文件限制文件的类型和文件大小
html js function getFileType(filePath){ //获取文件的后缀名 var startIndex = filePath.lastIndexOf(".&quo ...
Django框架之 Form表单和Ajax上传文件
Django框架之 Form表单和Ajax上传文件浏览目录 Form表单上传文件 Ajax上传文件伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
ajax上传 java,javaWeb中使用ajax上传文件
javaWeb上传图片上传文件所必要的两个jar包:commons-fileupload.jar.commons-io.jar. 核心代码: String withPath = req.getSer ...
js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例包含的知识点有:(仅考虑手机端,pc兼容性不清,建议使用jquery版本的) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新.自动上传. ...
tinymce 多图上传，上传文件，上传视频，单图上传
tinymce 多图上传,上传文件,上传视频,单图上传参考材料引入插件单图上传,文件上传,图片上传多图上传参考材料 http://tinymce.ax-z.cn/more-plugins/a ...

Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传

Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传相关推荐

最新文章

热门文章

Bootstrap+PHP fileinput 实现多图上传 这是ajax上传，只能单张单张图片地上传

Bootstrap+PHP fileinput 实现多图上传 这是ajax上传，只能单张单张图片地上传相关推荐

最新文章

热门文章

Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传

Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传相关推荐