基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件
1
2
3
4
5
6
|
<link href= "__PUBLIC__/CSS/bootstrap.css" rel= "external nofollow" rel= "stylesheet" > <link type= "text/css" rel= "stylesheet" href= "__PUBLIC__/CSS/fileinput.css" rel= "external nofollow" /> <script type= "text/javascript" src= "__PUBLIC__/JS/bootstrap.min.js" ></script> <script type= "text/javascript" src= "__PUBLIC__/JS/jquery.min.js" ></script> <script type= "text/javascript" src= "__PUBLIC__/JS/fileinput.js" ></script> <script type= "text/javascript" src= "__PUBLIC__/JS/fileinput_locale_zh.js" ></script> //中文包,不需要可以不用导入 |
html代码
1
2
3
|
<form enctype= "multipart/form-data" > <input id= "file-1" name= "file" type= "file" multiple class= "file" data-overwrite-initial= "false" data-min-file-count= "1" /> </form> |
js代码
1
2
3
4
5
6
7
8
9
10
11
|
$( "#file-1" ).fileinput({ uploadUrl: '' , // 必须设置个路径进入php代码部分 allowedFileExtensions : [ 'jpg' , 'png' , 'gif' , 'txt' , 'zip' , 'ico' , 'jpeg' , 'js' , 'css' , 'java' , 'mp3' , 'mp4' , 'doc' , 'docx' ], //允许的文件类型 overwriteInitial: false , maxFileSize: 1500, //文件的最大大小 单位是k maxFilesNum: 10, //最多文件数量 // allowedFileTypes: ['image', 'video', 'flash'], slugCallback: function (filename) { return filename; } }); |
php代码
1
2
3
4
|
$file=$_FILES[ 'file' ]; //获取上称文件的信息,数组形式 $date[ 'file_name' ] = $file[ 'name' ]; //文件的名称 $date[ 'file_size' ] = $file[ 'size' ]; //文件的大小 $date[ 'file_type' ] = $file[ 'type' ]; //文件的类型 |
然后进行上传,用ajax返回一个错误信息或者成功信息
直接用echo返回也行。
样式:
以上所述是小编给大家介绍的基于bootstrap的上传插件fileinput 的ajax异步上传功能(支持多文件上传预览拖拽),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
原文链接:http://www.cnblogs.com/zhuchenglin/articles/6554738.html
基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)的更多相关文章
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- 支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- 图片上传并回显Ajax异步篇
图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...
- Bootstrap 文件上传插件 FileInput的使用问题
: 在使用bootstrap的文件上传插件fileinput http://plugins.krajee.com/file-input的预览功能时,删除预览图片在 bootstrap 模态框中没有用, ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug
搜索: jquery ajaxFileUpload AjaxFileUpload同时上传多个文件 原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代 ...
- skymvc文件上传支持多文件上传
skymvc文件上传支持多文件上传 支持单文件.多文件上传 可以设定 文件大小.存储目录.文件类型 //上传的文件目录 $this->upload->uploaddir="att ...
随机推荐
- Linux Deploy Ubuntu安装MySQL
一.在Android手机安装Linux 二.Ubuntu安装Mysql 建议在root用户上操作 sudo su 输入密码 (一)安装mysql 1. sudo apt-get install mys ...
- 【题解】 [NOI2009]变换序列 (二分图匹配)
懒得复制,戳我戳我 Solution: 这个题面出的很毒瘤,读懂了其实是个板子题qwq 题面意思:有个\(0\)至\(N-1\)的数列是由另一个数列通过加减得到的,相当于将\(A_i\)变成\(i\) ...
- luogu2375 动物园 (kmp)
首先求出fail数组,如果没有不重叠的限制的话,我们可以在求fail的时候递推出个数cnt[i]=cnt[fail[i]]+1(这个cnt是算上自己本身==自己本身的) 然后如果是要求不重叠的话,就是 ...
- 【uoj126】 NOI2013—快餐店
http://uoj.ac/problem/126 (题目链接) 题意 求基环树直径. Solution zz选手迟早退役,唉,右转题解→_→:LCF 细节 拓扑排序的时候度数为0时入队.我在想什么w ...
- bzoj 4464 : [Jsoi2013]旅行时的困惑
网络流建图. 从S向每个点连边,从每个点向T连边. 每条树边反向连一条下界为1,上界inf的边. 跑最小流. 注意加当前弧优化. #include<cstdio> #include< ...
- Linux上printf命令的用法
printf格式化输出 基本格式 printf [format] [文本1] [文本2] .. 常用格式替换符 %s 字符串 %f 浮点格式 %c ASCII字符,即显示对应参数的第一个字符 %d,% ...
- IDE和SDK
像我这种不是专科班出来的,真的很多概念都不太清楚,今天来说说IDE和SDK 简单的来说: IDE(集成开发环境 Integrated Development Environment) 就是我们编写代码 ...
- Java基础-标识符与关键字
Java基础-标识符与关键字 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是标识符 标识符就是程序员在编写程序时,给类,变量,方法等起的名字. 二.标识符的命名规则 1& ...
- Python基础【day03】:文件操作(六)
一.概述 我们工作中需要经常操作文件,下面就讲讲如何用Python操作文件 1.文件操作的流程: 打开文件,得到文件句柄赋值给一个变量 通过文件句柄,对文件进行操作 关闭文件 二.入门 1.语法 op ...
- [Java] I/O底层原理之三:NIO
本篇文章参考自并发编程网 一.NIO 的概述 NIO 由以下几个核心组成 Channels Buffers Selectors 选择器用于监听多个通道的事件(如:链接打开.数据达到),单个线程可以监听 ...