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

 更新时间:2017年03月27日 17:29:34   作者:lin_zone  
这篇文章主要介绍了基于bootstrap的上传插件fileinput 的ajax异步上传功能(支持多文件上传预览拖拽),非常不错,具有参考借鉴价值,需要的朋友可以参考下

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

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

$("#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的上传插件fileinput 的ajax异步上传功能(支持多文件上传预览拖拽),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Ajax简单的异步交互及Ajax原生编写

    Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象
    2016-01-01
  • ajax请求添加自定义header参数代码

    ajax请求添加自定义header参数代码

    这篇文章主要介绍了ajax请求添加自定义header参数代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Ajax基础使用详解

    Ajax基础使用详解

    这篇文章主要介绍了Ajax基础使用详解,是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具,本篇就来对ajax基础进行详细讲解,需要的朋友可以参考下
    2023-05-05
  • Ajax商品分类三级联动的简单实现(案例)

    Ajax商品分类三级联动的简单实现(案例)

    下面小编就为大家带来一篇Ajax商品分类三级联动的简单实现(案例)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jQuery Ajax的readyState和status的区别和使用详解

    jQuery Ajax的readyState和status的区别和使用详解

    在前几篇分析了jquery的ajax异步和同步,以及异常的一些处理,感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事,非常不错,对ajax readystate和status区别和使用感兴趣的朋友一起学习吧
    2017-03-03
  • 切记ajax中要带上AntiForgeryToken防止CSRF攻击

    切记ajax中要带上AntiForgeryToken防止CSRF攻击

    在程序项目中经常看到ajax post数据到服务器没有加上防伪标记,导致CSRF被攻击,下面小编通过本篇文章给大家介绍ajax中要带上AntiForgeryToken防止CSRF攻击,感兴趣的朋友一起学习吧
    2015-10-10
  • 有关Ajax跨域问题的两种解决方法

    有关Ajax跨域问题的两种解决方法

    ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,会警告,所以才出现ajax跨域的问题。
    2015-10-10
  • 基于firefox实现ajax图片上传

    基于firefox实现ajax图片上传

    这篇文章主要介绍了基于firefox实现ajax图片上传,大家都知道在FF下使用ajax是件挺困难的事情,今天给大家介绍的是完美解决这个问题的方法,小伙伴可以参考下。
    2015-05-05
  • ajax实现的提交文章前进行敏感词审核的代码

    ajax实现的提交文章前进行敏感词审核的代码

    在做“文章敏感词汇审核”功能的时候,开始在把“审核”放在插入数据库的时候,后来想有一个功能,能在用户点击“提交”按钮的时候,给一个提示。这样相对“友好”那么点。
    2010-02-02
  • Ajax跨域访问Cookie丢失问题的解决方法

    Ajax跨域访问Cookie丢失问题的解决方法

    这篇文章主要介绍了Ajax跨域访问Cookie丢失问题的解决方法,需要的朋友可以参考下
    2017-02-02

最新评论