基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
2023-09-27 14:24:02 时间
首先需要导入一些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
相关文章
- yii2 用 bootstrap 给元素添加背景色
- Bootstrap 3 Glyphicons are not working
- bootstrap-table 的 toolbar 能去掉显示吗?
- 积跬步,聚小流------Bootstrap学习记录(3)
- Bootstrap学习笔记(实习第2天)
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
- 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
- Bootstrap-模态框Modal使用
- Bootstrap 引入文件顺序及IE兼容性js
- 基于 Bootstrap 5 的多用途预定(酒店、航班、出租车、旅游)主题 HTML 网站模板
- bootstrap单选框复选框的使用
- Bootstrap 控制移动端和网页端的元素隐藏和显示
- Bootstrap 过渡效果