Jquery图片上传组件，支持多文件上传
Jquery图片上传组件，支持多文件上传
http://www.jq22.com/jquery-info230
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。
支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。
http://www.jq22.com/yanshi230
多文件上传也是一个个上传的，关键是在选择的时候让他一次性选择多个
<input type="file" multiple="" name="files[]">
======================================================
插件描述：jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。
支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。
产品特点
多文件上传：
允许选择多个文件一次，并将其上传同时进行。
拖放支持：
可以从您的桌面或文件管理器中拖放他们在您的浏览器窗口中上传文件。
上传进度条：
显示一个进度条显示为单独的文件和所有上传组合上传进度。
可取消上传：
单个文件上传可以取消来停止上传进度。
可恢复上传：
中止的上传可以与浏览器支持的Blob API进行恢复。
分块上传：
大文件可以上传较小的块与浏览器支持的Blob的API 。
客户端图像大小调整：
图像可以自动调整大小的客户端与浏览器支持所需的JS API的。
预览图像，音频和视频：
图像，音频和视频文件的预览可以与浏览器支持所需的API上传前显示。
没有浏览器插件（例如使用Adobe的Flash ）要求：
该实现是基于开放的标准，如HTML5和JavaScript的，不需要额外的浏览器插件。
优美的后备旧版的浏览器：
如果支持的话，使用内置页框作为后备旧版浏览器通过的XMLHttpRequest上传文件。
HTML文件上传表单回退：
通过使用标准的HTML文件上传表单的控件元素允许渐进增强。
跨站点的文件上传：
支持上传文件到不同的域与跨站点的XMLHttpRequest或iframe重定向。
多个插件实例：
允许使用在同一个网页上的多个插件实例。
可定制和可扩展的：
提供了一个API来设置各个选项，并定义回调方法的各种载事件。
多重和文件内容流上传：
文件可以被上传为标准的“多部分/窗体的数据”或文件内容流（ HTTP PUT文件上传） 。
兼容任何服务器端应用平台：
适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。
用法
下载压缩包，解压到网站就可用（与demo）一样（PHP环境）。
最小化安装向导（适用于需要自己定义界面元素的童鞋）：
需要一个input元素：<input id="fileupload" type="file" name="file[]" multiple>
需要加载的js文件有:
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
代码例子（摘自官方）：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
最小安装如何显示上传进度条：
插件支持显示每个文件的上传进度(progress)显示和所有文件的总体上传进度(progressall)显示：
$('#fileupload').fileupload({
/* ... */
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
需要一个<div>容器用来显示进：
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
需要给进度条不同颜色显示才行，可以通过CSS来设置：
.bar {
height: 18px;
background: green;
}
将要上传的文件名显示在一个元素节点上：
你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});
如何通过点击按钮来开始上传：
在上例基础上，可以通过按钮点击事件来触发上传（上例是自动上传）：
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function () {
$(this).replaceWith($('<p/>').text('Uploading...'));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});
Jquery图片上传组件，支持多文件上传的更多相关文章
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 聊一聊jquery文件上传（支持多文件上传）
谈到文件上传,现在一般都用现成的组件可以使用.PC端的可以使用uploadify.针对微网站H5也有uploadifive.但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的. ...
- Flash上传组件之SWFUpload文件上传
一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而 ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- 分享一个react 图片上传组件 支持OSS 七牛云
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...
- php 图片上传 并返回上传文件位置 支持多文件上传
<?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...
- jquery.form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...
- ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug
搜索: jquery ajaxFileUpload AjaxFileUpload同时上传多个文件 原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代 ...
- lumen 支持多文件上传
1.webform (注意:name后面一定要加[]号) <form method="post" enctype="multipart/form-data" ...
随机推荐
- Penn Treebank
NLP中常用的PTB语料库,全名Penn Treebank.Penn Treebank是一个项目的名称,项目目的是对语料进行标注,标注内容包括词性标注以及句法分析. 语料来源为:1989年华尔街日报语 ...
- HDU 5636 Shortest Path(Floyed，枚举)
Shortest Path Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Tot ...
- PAT-GPLT L1-035 - 情人节 - [大水题]
题目链接:https://www.patest.cn/contests/gplt/L1-035 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standar ...
- Win10 下 RabbitMQ 的 安装 配置
记录下本人在win10环境下安装RabbitMQ的步骤,以作备忘. 第一步:下载并安装erlang 原因:RabbitMQ服务端代码是使用并发式语言Erlang编写的,安装Rabbit MQ的前提是安 ...
- The third column indicates whether subclasses of the class declared outside this package have access to the member.；
总结1.modifier 改性剂 修饰符 修饰语 调节器access modifier 访问修饰符 存取权限 存取修饰词 存取修饰字官网“can”Access level modifiers dete ...
- 新入职如何快速去了解一个Javaweb项目!
1.从代码结构入手,搞清楚Java源码所在目录以及jsp代码所在目录. 2.从Web.xml入手,搞清楚首页,上下文及配置情况. 3.从lib目录里初步查看系统使用的框架和工具包. 4.从页面大体浏览 ...
- Linux IO多路复用之epoll网络编程及源码（转）
原文: 前言 本章节是用基本的Linux基本函数加上epoll调用编写一个完整的服务器和客户端例子,可在Linux上运行,客户端和服务端的功能如下: 客户端从标准输入读入一行,发送到服务端 服务端从网 ...
- usb设备运行不正常的解决方法（转）
add by zhj:上午鼠标还用的好好的,下午就不能用了,插上之后提示“跟这台计算机连接的一个usb设备运行不正常”,尼玛,什么情况?我今天没安装软件啊,换了个USB接口也不行,在另一台电脑上试还是 ...
- google浏览器mac上跨域问题解决
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ /Use ...
- 004-spring cloud gateway-网关请求处理过程
一.网关请求处理过程 客户端向Spring Cloud Gateway发出请求.如果网关处理程序映射确定请求与路由匹配,则将其发送到网关Web处理程序.此处理程序运行通过特定于请求的过滤器链发送请求. ...