首先需要导入一些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

支持原创

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

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

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  2. 支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  3. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  4. PHP WAMP 文件上传 及 简单的上传预览

    ...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...

  5. 上传文件的三种方式xhr,ajax和iframe及上传预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  7. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  8. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  9. 用file标签实现多图文件上传预览

    效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...

随机推荐

  1. 咏南WEB APP开发框架

    咏南WEB APP开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.bai ...

  2. 用C++实现半透明按钮控件(PNG,GDI+)

        使用MFC实现上面的按钮半透明效果能看到父窗口中的内容,上面是效果图(一个是带背景图片的.另一个是不带的). 控件继承自CWnd类(彩色的部分是窗口的背景图片.按钮是PNG图片,第二个图标是鼠 ...

  3. Gradle初识

    一.安装配置 gradle官方网站https://gradle.org/,下载下来是一个压缩包,解压到合适的目录即可,然后配置环境变量(GRADLE_HOME,Path),略去. 二.IDEA配置 N ...

  4. 开源GIS浅谈 【转】

    http://blog.csdn.net/happyduoduo1/article/details/51773850 谈到GIS软件,首先让我们想到的是GIS界的龙头大哥ESRI公司旗下的ArcGIS ...

  5. javascript umd esm slim

    在CDN的连接中看到多个连接时如何选择? JavaScript 模块现状 UMD和ECMAScript模块 https://cdn.bootcss.com/popper.js/1.13.0/esm/p ...

  6. 【转】关于免费SSL证书的那些事儿

    根据 Let’s Encrypt CA 的统计,截至 2017 年 11 月,Firefox 加载的网页中启用 HTTPS 的比例占 67%,比去年底的 45% 有巨大提升.浏览器开发商如 Mozil ...

  7. iOS实现pdf文件预览,上下翻页、缩放,读取pdf目录

    最近有个朋友想做一个pdf预览,要求能够上下滑动翻页.带缩放.目录跳转功能. 因为之前我只做过简单的预览,那时直接用uiwebview实现的,这次找了下资料,发现一个比较好的库. 其原理实现: 自定义 ...

  8. 【C++】C++中的迭代器

    目录结构: contents structure [-] 迭代器运算符 迭代器类型 begin和end运算符 迭代器的算术运算 可以使用下标来访问string对象或vector对象的元素,还有另外一种 ...

  9. 游戏开发中IIS常见支持MIME类型文件解析

    游戏开发中IIS常见支持MIME类型文件解析 .apkapplication/vnd.android .ipaapplication/vnd.iphone .csbapplication/octet- ...

  10. Atitit sleep原理 node.js sleep解决方案 timer

    Atitit  sleep原理  node.js sleep解决方案  timer sleep()的实现分为三步: 1.注册一个信号signal(SIGALRM,handler).接收内核给出的一个信 ...