首先需要导入一些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