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

​<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代码

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代码

​$file=$_FILES[​ ​'file'​ ​];​ ​//获取上称文件的信息，数组形式​ ​$date[​ ​'file_name'​ ​] = $file[​ ​'name'​ ​];​ ​//文件的名称​ ​$date[​ ​'file_size'​ ​] = $file[​ ​'size'​ ​];​ ​//文件的大小​ ​$date[​ ​'file_type'​ ​] = $file[​ ​'type'​ ​];​ ​//文件的类型​

然后进行上传，用ajax返回一个错误信息或者成功信息

直接用echo返回也行。

样式：