Jquery图片上传组件，支持多文件上传

时间：2023-02-17 08:19:46

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图片上传组件，支持多文件上传的更多相关文章

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

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

  2. 聊一聊jquery文件上传（支持多文件上传）

    谈到文件上传,现在一般都用现成的组件可以使用.PC端的可以使用uploadify.针对微网站H5也有uploadifive.但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的. ...

  3. Flash上传组件之SWFUpload文件上传

    一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而 ...

  4. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  5. php 图片上传 并返回上传文件位置 支持多文件上传

    <?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...

  6. jquery&period;form&period;js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  7. ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug

    搜索: jquery ajaxFileUpload AjaxFileUpload同时上传多个文件 原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代 ...

  8. lumen 支持多文件上传

    1.webform (注意:name后面一定要加[]号) <form method="post" enctype="multipart/form-data&quot ...

  9. HTTP文件上传服务器-支持超大文件HTTP断点续传的实现办法

    最近由于笔者所在的研发集团产品需要,需要支持高性能的大文件http上传,并且要求支持http断点续传.笔者在以前的博客如何实现支持大文件的高性能HTTP文件上传服务器已经介绍了实现大文件上传的一些基本 ...

随机推荐

  1. SQL Server-聚焦IN VS EXISTS VS JOIN性能分析（十九）

    前言 本节我们开始讲讲这一系列性能比较的终极篇IN VS EXISTS VS JOIN的性能分析,前面系列有人一直在说场景不够,这里我们结合查询索引列.非索引列.查询小表.查询大表来综合分析,简短的内 ...

  2. android给View设置上下左右边框

    给View控件设置边框,可以动态设置上下左右.通过布局文件就能搞定 1.在drawable文件夹下新建一个shape_main_list_bg.xml文件 <layer-list xmlns:a ...

  3. 使用nodejs爬取拉勾苏州和上海的&period;NET职位信息

    最近开始找工作,本人苏州,面了几家都没有结果很是伤心.在拉勾上按照城市苏州关键字.NET来搜索一共才80来个职位,再用薪水一过滤,基本上没几个能投了.再加上最近苏州的房价蹭蹭的长,房贷压力也是非常大, ...

  4. 网站迁移时候，发现&lt&semi;head&gt&semi;内容都到body里了

    遇到的问题截图如下: 这个是编码问题,需要把所有涉及的文件保存成UTF-8 without BOM,手动的话可以用notepad++ 如果网站支持php,这边提供了一个php的脚本(clearBom. ...

  5. Linux文件锁flock

    Linux文件锁flock 在多个进程同时操作同一份文件的过程中,很容易导致文件中的数据混乱,需要锁操作来保证数据的完整性,这里介绍的针对文件的锁,称之为“文件锁”-flock. flock,建议性锁 ...

  6. JAVA正则表达式介绍和使用

    本文引用自 http://www.cnblogs.com/android-html5/archive/2012/06/02/2533924.html 技术博客 1.Java中在某个字符串中查询某个字符 ...

  7. Qt模拟C&num;的File类对文件进行操作

    其实只是QT菜鸟为了练习而搞出来的 文件头: #include <QFile> #include <QString> #include <iostream> #in ...

  8. android 绘图

    在main.xml文件中代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  9. DataSet和DataTable详解

    先构建一个结构与用户请求数据结构相同的DataTable,然后将用户的请求数据填充到构建好的DataTable中,最后将DataTable添加到DataSet中. DataTable,,DataCol ...

  10. zepto源码分析系列

    如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Ze ...

相关文章