基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) - 网站

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

分类:js_jQuery答疑 - 常见问题 · 发布时间:2021-10-08 18:48 · 阅读:10832

这篇文章主要介绍了基于bootstrap的上传插件fileinput 的ajax异步上传功能(支持多文件上传预览拖拽),非常不错,具有参考借鉴价值,需要的朋友可以参考下

首先需要导入一些js和css文件

 //中文包,不需要可以不用导入

html代码

 
  

js代码

 $("#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返回也行。

样式:

标签:
bootstrap ajax fileinput

相关文章

AJAX乱码与异步同步以及封装jQuery库实现步骤详解

这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

AJAX的跨域问题解决方案

跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源,下面这篇文章主要给大家介绍了关于AJAX的跨域问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

利用Ajax实现智能回答的机器人示例代码

这篇文章主要介绍了利用Ajax实现智能回答的机器人,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

ajax、axios和fetch之间优缺点重点对比总结

今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下

如何通过axios发起Ajax请求(最新推荐)

Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求,这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下

返回分类 返回首页