基于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

如何联系我：【万里虎】www.bravetiger.cn 【QQ】3396726884 （咨询问题100元起，帮助解决问题500元起） 【博客】http://www.cnblogs.com/kenshinobiy/