支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
首先需要导入一些js和css文件
<link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" />
<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代码
<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代码
$("#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代码
$file=$_FILES['file'];//获取上称文件的信息,数组形式
$date['file_name'] = $file['name'];//文件的名称
$date['file_size'] = $file['size'];//文件的大小
$date['file_type'] = $file['type'];//文件的类型
然后进行上传,用ajax返回一个错误信息或者成功信息
直接用echo返回也行。
样式:
文章出处:http://www.cnblogs.com/lurensang/p/5787364.html
支持原创
支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)的更多相关文章
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- PHP WAMP 文件上传 及 简单的上传预览
...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...
- 上传文件的三种方式xhr,ajax和iframe及上传预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html,图片上传预览,input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- FileReader()读取文件、图片上传预览
前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...
- 用file标签实现多图文件上传预览
效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...
随机推荐
- nginx的http_sub_module模块使用之替换字符串
Nginx可以实现很多功能,提供了许多插件,其中一个比较冷门的http_sub_module,是用来替换指定字符串的,它的原理是Nginx解析到文件后,执行这个插件进行拦截后返回. 昨天碰到一个场景, ...
- Lua MD5加密字符串
function md5_sumhexa(k) local md5_core = require "md5.core" k = md5_core.sum(k) return (st ...
- centos修改主机名 root@后面的名字
阿里云买的新的ESC,名字都是一串字符,不利于平时使用.我们可以重命名主机来标记. centos6 [root@centos6 ~]$ hostname # 查看当前的hostnmae centos6 ...
- springMVC4(7)模型视图方法源代码综合分析
在完整web开发中.springMVC主要充当了控制层的角色.它接受视图层的请求.获取视图层请求数据,再对数据进行业务逻辑处理.然后封装成视图层须要的模型数据,再将数据导向到jsp等视图界面. 在前面 ...
- 分享12款令人瞠目结舌的WebVR演示和实验效果
不管你信不信, WebVR绝对是浏览器下一个让你激动的技术方向, 也许很快你就可以使用VR头显或者相关设备直接访问web内容和资源啦! 在这篇资源分享帖中,我们将介绍很多基于浏览器的VR演示和游戏,帮 ...
- Mybatis中使用集合、数组
一.简述 本文讲Mybatis中如何将传入参数为数组或者集合对象,进行遍历,组合Where条件中如in条件等内容. 有3种情况: 如果传入的是单参数且参数类型是一个List的时候,collection ...
- TensorFlow实战Google深度学习框架5-7章学习笔记
目录 第5章 MNIST数字识别问题 第6章 图像识别与卷积神经网络 第7章 图像数据处理 第5章 MNIST数字识别问题 MNIST是一个非常有名的手写体数字识别数据集,在很多资料中,这个数据集都会 ...
- 每天一个linux命令:free
1.命令简介 free (free) 命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer. 2.用法 free [-b | -k | -m | -g | -h ...
- 1154:LETTERS
题目链接http://bailian.openjudge.cn/practice/1154/ 总时间限制: 1000ms 内存限制: 65536kB 描述 A single-player game i ...
- Nginx——location匹配与在配置中的优先级
1. location表达式类型 location ^~ /api/v7/ { proxy_next_upstream http_404 http_500 http_502 http_503 http ...