这篇文章主要介绍了基于bootstrap的上传插件fileinput 的ajax异步上传功能(支持多文件上传预览拖拽),非常不错,具有参考借鉴价值,对ajax上传感兴趣的朋友可以参考下基于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>
|
Salin selepas log masuk
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>
|
Salin selepas log masuk
js代码
1 2 3 4 5 6 7 8 9 10 11 | $( "#file-1" ).fileinput({
uploadUrl: '',
allowedFileExtensions : ['jpg', 'png','gif','txt','zip','ico','jpeg','js','css','java','mp3','mp4','doc','docx'],
overwriteInitial: false,
maxFileSize: 1500,
maxFilesNum: 10,
slugCallback: function (filename) {
return filename;
}
});
|
Salin selepas log masuk
php代码
1 2 3 4 | $file = $_FILES ['file'];
$date ['file_name'] = $file ['name'];
$date ['file_size'] = $file ['size'];
$date ['file_type'] = $file ['type'];
|
Salin selepas log masuk
然后进行上传,用ajax返回一个错误信息或者成功信息
直接用echo返回也行。
样式:


以上所述是小编给大家介绍的基于bootstrap的上传插件fileinput 的ajax异步上传功能(支持多文件上传预览拖拽),希望对大家有所帮助!!
相关推荐:
Ajax犯的错误处理方法
ajax怎样才能读取本地的json
按钮的Ajax请求时一次点击两次提交的解决方法
Atas ialah kandungan terperinci 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!