支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

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

<link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet">

<link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" />

 <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返回也行。

样式:

文章出处:http://www.cnblogs.com/lurensang/p/5787364.html

支持原创

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习实践二三事

VirtualBox安装CentOS联网问题

最近玩Hadoop需要几个虚拟机构成集群,就在VirtualBox上安装了CentOS,联网问题就出现了,具体就是两个: 主机与虚拟机的联通 虚拟机的上网问题 ...

1968
来自专栏散尽浮华

Git管理项目实例说明-记录和跟踪项目

假设一个HTML项目,使用Git来记录和跟踪这个项目,包括以下内容: 1)创建版本库。 2)添加与修改文件。 3)创建新分支。 4)打标签并整理版本库。 5)克...

1925
来自专栏云计算教程系列

如何在Ubuntu 18.04上安装和配置Postfix

Postfix是一种流行的开源邮件传输代理(MTA),可用于在Linux系统上路由和传递电子邮件。据估计,互联网上约有25%的公共邮件服务器运行Postfix。

2981
来自专栏小巫技术博客

Android多模块构建合并aar解决方案

7113
来自专栏zhangdd.com

Linux命令-自动挂载文件/etc/fstab功能详解

磁盘被手动挂载之后都必须把挂载信息写入/etc/fstab这个文件中,否则下次开机启动时仍然需要重新挂载。

1703
来自专栏云计算教程系列

如何在Ubuntu 14.04上安装Munin监视工具

Munin是一个系统,网络和基础设施监控应用程序,通过Web浏览器以图形形式提供信息。它是围绕客户端 - 服务器架构设计的,可以配置为监控它所安装的机器(Mun...

1060
来自专栏编程

代码管理工具SourceTree的用法

【第二篇】 ? 一、Git管理和Svn管理区别 1、最核心的区别Git是分布式的,而Svn是集中式的。 2、Git每一个电脑都可以看成一个服务器,而Svn只有一...

5795
来自专栏CodingToDie

git 常用命令(1)

配置Name和Email 命令格式: git config --global user.name "your name" git config --global...

3416
来自专栏云计算教程系列

如何在Ubuntu 16.04上使用PM2和Nginx开发Node.js TCP服务器应用程序

Node.js是一个流行的开源JavaScript运行时环境,它基于Chrome的V8 Javascript引擎构建。Node.js用于构建服务器端和网络应用程...

2393
来自专栏虚拟化云计算

oVirt之软件架构全剖析

本文是从软件架构设计的角度剖析oVirt的vdsm,另外还有一篇是从功能架构设计的角度剖析oVirt。

2074

扫码关注云+社区

领取腾讯云代金券