plupload 异步上传插件使用心得
plupload 可以不依赖jquery，并且提供了 html5,flash,silverlight,html4 多种上传模式，使用起来比较简单，上一篇博客中介绍了其主要参数哈函数
一.简化用法
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload - Custom example</title>
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
</head>
<body style="font: 13px Verdana; background: #eee; color: #333"> <h1>Custom example</h1>
<p>Shows you how to use the core plupload API.</p>
<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<br />
<div id="container">
<a id="pickfiles" href="javascript:;">[Select files]</a>
<a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div>
<br />
<pre id="console"></pre>
<script type="text/javascript">
// Custom example logic
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', // you can pass an id...
container: document.getElementById('container'), // ... or DOM Element itself
url : 'upload.php',
flash_swf_url : '../js/Moxie.swf',
silverlight_xap_url : '../js/Moxie.xap',
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
},
init: {
PostInit: function() {
document.getElementById('filelist').innerHTML = '';
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
},
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
Error: function(up, err) {
document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
}
}
});
uploader.init(); </script>
</body>
</html>
只需要一个 plupload.full.min.js 类库就可以了，就是没有任何的样式
在yii的blog中使用的就是这种模式，可以去coding 下载 整合plupload
二.整合了jquery ui,并且引入了很多类库实现了带界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多文件上传</title>
<style type="text/css">
@import url(Scripts/jquery.ui.plupload/css/jquery.ui.plupload.css);
</style>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.22.min.js"></script>
<link rel="stylesheet" href="Scripts/base/jquery-ui.css" />
<!-- Third party script for BrowserPlus runtime (Google Gears included in Gears runtime now) -->
<script type="text/javascript" src="Scripts/browserplus-min.js"></script>
<!-- Load plupload and all it's runtimes and finally the jQuery UI queue widget -->
<script type="text/javascript" src="Scripts/plupload.full.js"></script>
<script type="text/javascript" src="Scripts/i18n/zh-cn.js"></script>
<script type="text/javascript" src="Scripts/jquery.ui.plupload/jquery.ui.plupload.js"></script>
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function () {
$("#uploader").plupload({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5', // 这里是说用什么技术引擎
url: 'uploadFiles.ashx', // 服务端上传路径
max_file_size: '10mb', // 文件上传最大限制。
chunk_size: '1mb', // 上传分块每块的大小，这个值小于服务器最大上传限制的值即可。
unique_names: true, // 上传的文件名是否唯一
// Resize images on clientside if we can
//// 是否生成缩略图（仅对图片文件有效）
resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
//// 这个数组是选择器，就是上传文件时限制的上传文件类型
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip,rar,7z" }
],
// Flash settings
// plupload.flash.swf 的所在路径
flash_swf_url: 'Scripts/plupload.flash.swf',
// Silverlight settings
// silverlight所在路径
silverlight_xap_url: 'Scripts/plupload.silverlight.xap'
});
// Client side form validation
/*$('form').submit(function (e) {
var uploader = $('#uploader').plupload('getUploader');
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
} else
alert('You must at least upload one file.');
return false;
});*/
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="uploader" style="width: 600px">
<p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
</form>
</body>
</html>
百度云下载地址 http://pan.baidu.com/s/1qWMLsra
plupload 异步上传插件使用心得的更多相关文章
- 关于Plupload结合上传插件jquery.plupload.queue的使用
之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...
- 浅谈异步上传插件 jquery-file-upload插件
当我们需要异步上传文件的时候,我们倾向于在网上查找相关的JQuery插件,jquery-file-upload就是我们经常看到的,但是他的主页是英文的,对于我们这些英语比较差的同学来说,简直就是... ...
- jquery之ajaxfileupload异步上传插件
点我下载工程代码由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/d ...
- jQuery 异步上传插件 Uploadify302 使用 （JavaEE Spring MVC）
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.而且是Ajax的,省去了自己写Ajax上传功能的麻烦.不过官方提供的实例时php版本的,本文将详细介绍Uploadify ...
- 【文件上传】jquery之ajaxfileupload异步上传插件
来自:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用J ...
- plupload文件上传插件
一 资源文档 二 基本使用 三 可能遇到的问题 一 资源文档 Git仓库地址:https://github.com/moxiecode/plupload 一个中文速查:http://www.cnblo ...
- 基于struts2的ajaxfileupload异步上传插件的使用
服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1 ...
- jQuery插件之ajaxFileUpload异步上传
介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...
- 适用于各浏览器支持图片预览，无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
随机推荐
- new关键字的理解-问题型
//输出的结果是?????????//The answer is good and gbc public class Example { String str=new String("goo ...
- QWidget QMainWindow QDialog 三个基类的区别
Qt类是一个提供所需的像全局变量一样的大量不同的标识符的命名空间.通常情况下,你可以忽略这个类.QObject和一些其它类继承了它,所以在这个Qt命名空间中定义的所有标识符通常情况下都可以无限制的使用 ...
- vi 编辑器跳转到指定行数
如:跳转到25行 :set number :23
- FZU 2107 Hua Rong Dao（暴力回溯）
dfs暴力回溯,这个代码是我修改以后的,里面的go相当简洁,以前的暴力手打太麻烦,我也来点技术含量.. #include<iostream> #include<cstring> ...
- Mysql 中文乱码问题完美解决方案
MySQL会出现中文乱码的原因不外乎下列几点: 1.server本身设定问题,例如还停留在latin1 2.table的语系设定问题(包含character与collation) 3.客户端程式(例如 ...
- ubuntu设置字体编码GBK和UTF-8
http://www.xwuxin.com/?p=1155 http://zhidao.baidu.com/link?url=T6m7WDVOM1VBiUctkfkf1qO14lSMLhxg6MIRt ...
- 翻译的很好的一篇android mediaplayer
MediaPlayer类可用于控制音频/视频文件或流的播放.关于如何使用这个类的方法还可以阅读VideoView类的文档. 1．状态图对播放音频/视频文件和流的控制是通过一个状态机来管理的.下图显示一 ...
- C语言数据类型的表示范围
1.C和C++语言中基本的数据类型有:字符型(char),整形(short, int, long), 浮点型(float, double) 类型 字节数 类型 字节数 char 1 short ...
- 【BZOJ 1572】 1572: [Usaco2009 Open]工作安排Job（贪心+优先队列）
1572: [Usaco2009 Open]工作安排Job Description Farmer John 有太多的工作要做啊!!!!!!!!为了让农场高效运转,他必须靠他的工作赚钱,每项工作花一个单 ...
- iptabels 的一些配置
iptables -L -n iptables -F iptables -P INPUT DROP iptables -P OUTPUT ACCEPT iptables -P FORWARD DR ...