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" ...
随机推荐
- 慕课学习--OSI与TCP/IP网络协议
**OSI:开放系统互连参考模型 (Open System Interconnect 简称OSI)是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型,为开放 ...
- 《C与指针》——高级指针话题
指针真是让人又爱又恨..... 首先还是先来看一下C语言中的高级指针声明.不要被表面迷惑最重要. /* ** <C和指针>——高级指针话题 */ int i; //定义一个整型变量 int ...
- 关于python爬虫的编码错误
现在才发现很多错误只有自己一点点的去尝试才能发现.不管之前别人怎么和你说,总是不可能面面俱到,所以提升自己的方法就是亲手实践,自己一点点的去发现问题,并一个个的解决.慢慢享受其中无言的快感. 今天就发 ...
- [分布式系统学习]阅读笔记 Distributed systems for fun and profit 之三 时间和顺序
这是阅读 http://book.mixu.net/distsys/time.html 的笔记,是该系列的第三章. 为什么时间和顺序很重要呢?为什么我们关系事件A发生在事件B之前? 因为分布式系统要解 ...
- 关于webpy模板自动HTML转义的问题
注意: web.py 将会转义任何任何用到的变量,所以当你将 name 的值设为是一段 HTML 时,它会被转义显示成纯文本.如果要关闭该选项,可以写成 $:name 来代替 $name. 如果我们想 ...
- 1.2Tensorflow的Session操作
tf的session #-*- coding: utf-8 -*- # @Time : 2017/12/21 14:56 # @Author : Z # @Email : S # @File : 1. ...
- function &w(){}
CodeIgniter 3.1.0 <?php //\system\core\Common.php function &load_class($class, $directory = ' ...
- python MD5步骤
https://www.cnblogs.com/zipon/p/8340720.html import hashlib def get_token(): md5str = "abc" ...
- OKEX API(Websocket)
本文介绍OKEX API Websocket WebSocket API for SPOT 开始使用 WebSocket是HTML5一种新的协议(Protocol).它实现了客户端与服务器全双工通信, ...
- centos7 安装composer
命令: 1.下载composer wget https://dl.laravel-china.org/composer.phar -O /usr/local/bin/composer 2.赋予权限 c ...