安全检查中...
请打开浏览器的javascript，然后刷新浏览器
< 浏览器安全检查中...
还剩 5 秒&一、Plupload上传插件官网地址：/download/
二、Plupload的Demo Test
& & & &1.下载相关plupload文件。demo中使用了layer组件。
& & &2.代码
&!DOCTYPE html&
&meta charset=&utf-8& /&
&title&Plupload上传插件使用&/title&
&link rel=&stylesheet& href=&js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css& /&&!--Plupload样式--&
&!--Plupload插件模块 &Open--&
&div class=&box& style=&margin:0width:500min-height: 300border:1px solid #F00;padding-left: 5&&
&p style=&text-align:color:&&Plupload上传插件demo&/p&
&p&最多可添加&span class=&c_red&&10&/span&个附件，每个大小不超过1MB；
&a class=&c_red& href=&javascript:void(0);&&上传遇到问题?&/a&
&!-- 上传操作 --&
&a id=&uploadBtn& class=&f_commit_btn& href=&javascript:void(0);&&上传附件&/a&
&!--上传完成页面显示文件列表以及删除操作--&
&ul class=&filebox& id=&fileList&&
&div id=&uploader& style=&display:&&
&p&您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .&/p&
&p&You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.&/p&
&div style=&text-align:padding-bottom: 10&&
&a id=&btn& href=&javascript:void(0);& onclick=&submitBtn()&&提交&/a&
&!--Plupload插件模块 &End--&
&!--JS引用 &Open--&
&script type=&text/javascript& src=&js/jquery-2.1.3.js& &&/script&
&script type=&text/javascript& src=&js/layer-v3.0.3/layer/layer.js& &&/script&&!--web弹层组件--&
&script type=&text/javascript& src=&js/plupload/plupload.full.min.js&&&/script&
&script type=&text/javascript& src=&js/plupload/i18n/zh_CN.js& &&/script&
&script type=&text/javascript& src=&js/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js& &&/script&
&!--JS引用 &End--&
&!-- JS方法--&
var layerI
$(function(){
initPlupload();//初始化上传组件
/****Test 回调 Open ***/
var data ={&files&:&aaa.jpg,b.jpg&};
ajaxDataback(data);
/****Test 回调 End ***/
/**绑定上传事件*/
$(document).on(&click&, &#uploadBtn&, function() {
//将插件对象填充到layer组件中
layerIndex = layer.open({ &
title:&上传文件&,
skin:&layui-layer-rim&,
area:[&800px&, &400px&],
content:$(&#uploader&)
/**文件上传完成，删除事件*/
$(document).on(&click&, &.deleteFile&, function() {
if($(this).attr(&data-flag&) =='old'){//回调数据删除
//删除对应的上传文件
$(this).parent(&li&).remove();
}else{//新增数据删除
//removeFile(file)。从上传队列中移除文件，参数file为plupload文件对象或先前指定的文件名称
$(&#uploader&).pluploadQueue().removeFile($(this).attr(&data-id&));
//删除对应的上传文件
$(&#fileList li[data-id='&+$(this).attr(&data-id&)+&']&).remove();
/** 初始化上传组件*/
function initPlupload() {
uploader = $(&#uploader&).pluploadQueue({
//General settings
runtimes:用来指定上传方式，指定多个上传方式请使用逗号隔开。一般情况下，你不需要配置该参数，因为Plupload默认会根据你的其他的参数配置来选择最合适的上传方式。
如果没有特殊要求的话，Plupload会首先选择html5上传方式，如果浏览器不支持html5，则会使用flash或silverlight，如果前面两者也都不支持，则会使用最传统的html4上传
方式。如果你想指定使用某个上传方式，或改变上传方式的优先顺序，则你可以配置该参数。
runtimes : 'html5,flash,html4',
//Flash settings
flash_swf_url : '/Plupload/js/plupload/Moxie.swf',//flash上传组件的url地址，如果是相对路径，则相对的是调用Plupload的html文档。当使用flash上传方式会用到该参数。
silverlight_xap_url : '/Plupload/js/plupload/Moxie.xap',//silverlight上传组件的url地址，如果是相对路径，则相对的是调用Plupload的html文档。当使用silverlight上传方式会用到该参数。
url : '/upload.do',//服务器端接收和处理上传文件的脚本地址
unique_names : true,//当值为true时会为每个上传的文件生成一个唯一的文件名，并作为额外的参数post到服务器端，参数明为name,值为生成的文件名。
multipart:true,//为true时将以multipart/form-data的形式来上传文件，为false时则以二进制的格式来上传文件。一般我们用multipart/form-data的形式来上传文件就足够了。
multiple_queues : true,
// Specify what files to browse for
filters : {//可以使用该参数来限制上传文件的类型，大小等
//mime_types用来限定上传文件的类型，为一个数组，该数组的每个元素又是一个对象，该对象有title和extensions两个属性，title为该过滤器的名称，extensions为文件扩展名，有多个时用逗号隔开。该属性默认为一个空数组，即不做限制。
//只允许上传图片和zip文件
mime_types : [
& &{ title : &Image files&, extensions : &jpg,gif,png,jpeg&},
& &{ title : &Zip files&, extensions : &zip& }
max_file_size : '400kb', //用来限定上传文件的大小，如果文件体积超过了该值，则不能被选取。值可以为一个数字，单位为b,也可以是一个字符串，由数字和单位组成，如'200kb'
& prevent_duplicates : true //是否允许选取重复的文件，为true时表示不允许，为false时表示允许，默认为false。如果两个文件的文件名和大小都相同，则会被认为是重复的文件
//plupload事件
init : { //当Plupload初始化完成后触发&
//FilesAdded：当文件添加到上传队列后触发
FilesAdded:function(uploader,files){
//用于修改页面,判读是否可以继续上传文件
var fileNum = $(&#fileList li&).
if(fileNum &= 10){
$.each(uploader.files, function (i, file) {&
& & & & & & & &
uploader.removeFile(file);&
& & & & & & & &
$(&#fileList&).find(&li[data-id=&+file.id+&]&).remove();
& & & & & &
& & & & & & & &layer.alert(&当前操作，最多上传10个文件。如需上传，请先删除原先文件！&);
//用于添加页面
/*$.each(uploader.files, function (i, file) {&
if(uploader.files.length & 10) { //用于判读上传文件个数
& & & & & & & &
uploader.removeFile(file);&
& & & & & & & &
$(&#fileList&).find(&li[data-id=&+file.id+&]&).remove();
& & & & & & & &}
& & & & & &}); */
& &//FileUploaded：当队列中的某一个文件上传完成后触发 。uploader为当前的plupload实例对象，file为触发此事件的文件对象，responseObject为服务器返回的信息对象，它有以下3个属性：
FileUploaded:function(uploader,file,responseObject){
//responseObject有以下3个属性：response：服务器返回的文本。responseHeaders：服务器返回的头信息。status：服务器返回的http状态码，比如200
var fileInfo = eval(&(&+responseObject.response+&)&);//上传完成服务器返回信息
var status = fileInfo.
//图片上传完成回调
if(status){
var html ='';
html += '&li data-id=&'+file.id+'& data-path=&'+fileInfo.msg+'& data-flag=&new&&';
html += '&p class=&f_fj_jdtit&&&span&'+fileInfo.msg+'&/span&('+Math.floor(file.size/1024)+'kb)-上传完成&/p&';
html += '&div class=&f_fj_jdt&&&/div&&i class=&iconfont icon-close icon_close deleteFile& data-id=&'+file.id+'&&删除&/i&';
html += '&/li&';
$(&#fileList&).append(html);//上传文件列表
layer.close(layerIndex);//关闭上传弹窗层
layer.alert(fileInfo.msg);
* 用于ajax请求回调数据。页面获取文件列表
* @param data 回调数据
function ajaxDataback(data){
//获取文件列表
if(data.files.length & 0){
var aryFile = data.files.split(&,&);
for(var i = 0;i& aryFile.i++){
var html ='';
html += '&li data-id=&& data-path=&'+aryFile[i]+'&&';//data-id属性为空。data-flag：属性用于判断是否回显读取数据。新增为：new 。回调为old
html += '&p class=&f_fj_jdtit&&&span&'+aryFile[i]+'&/span&&/p&';
html += '&div class=&f_fj_jdt&&&/div&';
html +=
'&i class=&iconfont icon-close icon_close deleteFile& data-flag=&old& data-id=&&&删除&/i&';
html += '&/li&';
$(&#fileList&).append(html);//上传文件列表
* 提交表单
* 只有处理上传文件部分
function submitBtn(){
var formData={};//参数对象
var aryfiles=new Array();
$(&#fileList li&).each(function(i, e) {
var path = $(this).attr(&data-path&);
aryfiles.push(path);
formData.files = aryfiles.join(',');
</(formData);
</(JSON.stringify(formData));
& & &3.页面
本文已收录于以下专栏：
相关文章推荐
说明：Plupload支持多种浏览器，多种上传方式！
一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传，就算是批量上传，也要...
优秀的web前端上传框架plupload简单教程，讲解的很详细，需要的朋友可以看一下，有不足的地方欢迎指正...
按步骤来，不然不会出错。。。。。。
1.下载两个文件commons-io和commons-fileupload(直接在Goole搜索这两个关键字，然后直接在apache官方网站下载就行了)，然后...
刚开始 采用的 是uploadify 插件集成的 springMvc
但是后来发现 uploadify会受到flash的限制，会产生跨域问题。 然后就换成了Huploadify 插件。解决的由fla...
兼容IE8浏览器，Plupload js文件上传插件：支持多文件上传和上传进度。使用pluploadQueue(settings)实例化的uploader的刷新、重新上传、地址动态修改。...
Plupload有以下功能和特点：
1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5...
他的最新文章
讲师：李江龙
讲师：司徒正美
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
jQuery实现视频大文件上传插件Plupload
导读：Plupload有以下功能和特点：1、拥有多种上传方式：HTML5、flash、silverlight以及传统的&input type=file /&。Plupload会自动侦测当前的...
Plupload有以下功能和特点：
1、拥有多种上传方式：HTML5、flash、silverlight以及传统的&input type=&file& /&。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。
2、支持以拖拽的方式来选取要上传的文件
3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩
4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。
视频类型文件上传，支持中途取消上传 &
var&uploader_video&=&new&plupload.Uploader({&
&&&&runtimes:&'gears,html5,html4,silverlight,flash',&&
&&&&browse_button:&['video_upload_btn'],&&
&&&&url:&&ajax.php&,&&
&&&&flash_swf_url:&'js/plugins/plupload/Moxie.swf',&&
&&&&silverlight_xap_url:&'js/plugins/plupload/Moxie.xap',&&
&&&&filters:&{&&
&&&&&&&&max_file_size:&'10mb',&&
&&&&&&&&mime_types:&[&
&&&&&&&&&&&&{title:&&files&,&extensions:&&mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv&}&&
&&&&&&&&]&&
&&&&multi_selection:&false,&&
&&&&init:&{&&
&&&&&&&&FilesAdded:&function(up,&files)&{&&
&&&&&&&&&&&&$(&#video_name_box&).css({&display&:&&inline-block&});&&
&&&&&&&&&&&&$(&#video_upload_btn&).hide();&&
&&&&&&&&&&&&$(&#video_file_name&).text(files[0].name);&&
&&&&&&&&&&&&$(&#upload_video&).removeClass(&disabled&);&&
&&&&&&&&&&&&$(&#upload_video&).click(function()&{&&
&&&&&&&&&&&&&&&&uploader_video.start();&&
&&&&&&&&&&&&})&&
&&&&&&&&&&&&$(&#video_iput&).attr(&file_id&,&files[0]['id'])&&
&&&&&&&&&&&&&
&&&&&&&&},&&
&&&&&&&&UploadProgress:&function(up,&file)&{&&
&&&&&&&&&&&&$(&#video_loading&).show();&&
&&&&&&&&&&&&$('#upload_video_area,#video_upload_area').hide();&&
&&&&&&&&&&&&var&percent&=&file.&&
&&&&&&&&&&&&$(&#percent&).css({&width&:&percent&+&&%&});&&
&&&&&&&&&&&&$(&#percentnum&).text(percent&+&&%&);&&
&&&&&&&&&&&&$(&#video_success&).hide();&&
&&&&&&&&},&&
&&&&&&&&FileUploaded:&function(up,&file,&info)&{&&
&&&&&&&&&&&&$(&#video_loading&).hide();&&
&&&&&&&&&&&&$(&#video_success&).show();&&
&&&&&&&&&&&&var&data&=&eval(&(&&+&info.response&+&&)&);&
&&&&&&&&&&&&$(&#video_iput&).html(&&input&type='hidden'id='video_file'&value='&&+&data.pic&+&&'/&&input&type='hidden'id='video_name'&value='&&+&data.name&+&&'/&&);&&
&&&&&&&&},&&
&&&&&&&&Error:&function(up,&err)&{&&
&&&&&&&&&&&&alert(err.message);&&
&&&&&&&&}&&
uploader_video.init();&
转载请注明（B5教程网）原文链接：
网友评论： 之前使用过很多的上传组件，但对各种浏览器的兼容性太差，不得不放弃！！
plupload 是款很强大的上传组件，不得不推荐。plupload&前端根据浏览器不同选择使用Html5、 Gears, Silverlight, Flash, BrowserPlus来对文件进行客户端优化，比如大图片的压缩，大文件分块上传，上传进度条、多文件上传等。官方网站：
效果截图：
配置文档说明：
Browse_button:触发浏览文件按钮标签的唯一id,,在flash、html5、和silverlight中能找到触发事件的源（我理解的，这个参数在队列部件不需要）& & &&
Container: 展现上传文件列表的容器，[默认是body]
chunk_size：当上传文件大于服务器接收端文件大小限制的时候，可以分多次请求发给服务器，如果不需要从设置中移出
drop_element：当浏览器支持拖拽的情况下，能够文件拖放到你想要的容器ID里
file_data_name：设置上传字段的名称。默认情况下被设置为文件。（我试验了没找到该如何使用它，暂且不提）
filters:选择文件扩展名的过滤器,每个过滤规则中只有title和ext两项[{title:'',&extensions:''}]
flash_swf_url:flash文件地址
headers：自定义的插入http请求的键值对
max_file_size：最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
multipart：布尔值，如果用mutlipart 代替二进制流的方式，在webkit下无法工作
multipart_params： 跟&multipart关联在一起的键值对
multi_selection： 多选对话框
resize：修改图片属性&resize: {width: 320, height: 240, quality: 90}
runtimes:上传插件初始化选用那种方式的优先级顺序，如果第一个初始化失败就走第二个，依次类推
required_features：需要那些特性，才能初始化插件
url：上传服务器地址
unique_names：是否生成唯一的文件名，避免与服务器文件重名
urlstream_upload：布尔值 如果是flash上传应该用URLStream 代替FileReference.upload
jquery部件的属性：
dragdrop：是否支持拖拽，默认值true
multiple_queues：是否可以多次上传
preinit：插件初始化前回调函数
rename：布尔值，上传之前可以重命名文件，默认false，木有找到如何重命名啊
& &&& &方法列表：
Uploader(setting)：创建实例的构造方法
var&uploader = new&plupload.Uploader({
&&&&runtimes : 'gears,html5,flash',
&&&&browse_button : 'button_id'
bind(event, function[, scope])：绑定事件
uploader.bind('Init', function(up) {
&&&&alert('Supports drag/drop: '&+ (!!up.features.dragdrop));
destroy()：销毁plupload的实例对象
uploader.destroy()
getFile(id): 获取上传文件信息& & &
uploader.bind('FilesAdded', function(up, files) {
&&&&for&(var&i in&files) {
&&&&&&&&up.getFile(files[i].id);&&&&&&
});&span style="color: #ff0000; font-size: 13"& &/span&
注：file：{ id:文件编号, loaded: 已经上传多少字节, name: 文件名, percent: 上传进度, size: 文件大小, status: 有四种状态 QUEUED, UPLOADING, FAILED, DONE.对应数值}
init:初始化plupload实例，添加监听对象
uploader.destroy()
refresh：重新实例化uploader
& && removeFile(id):从file中移除某个文件
splice(start,length)：从队列中start开始删除length个文件， 返回被删除的文件列表
start() 开始上传
& & & &stop()停止上传
unbind(name, function): 接触事件绑定
unbindAll()解绑所有事件
属性集合：
& & & features：uploader中包含那些特性
& & & files:当前队列中的文件列表
& & & id：uploader实例的唯一id
& & & runtime：当前运行环境（是html5、flash等等)
& & & state:当前上传进度状态
& & & total：当前上传文件的信息集合
& & 事件集合:（up为uploader缩写）
BeforeUpload(up, file)：文件上传完之前触发的事件
ChunkUploaded(up, file,response)文件被分块上传的事件
Destroy(up):uploader的destroy调用的方法
Error(up, err)：上传出错的时候触发
Fileadded(up, files):用户选择文件时触发
FileRemoved(up, files):当文件从上传队列中移除触发
FileUploaded(up, file, res):文件上传成功的时候触发
Init(up):当初始化的时候触发
PostInit(up):init执行完以后要执行的事件触发
QueueChanged(up):当文件队列变化时触发
Refresh(up):当silverlight/flash或是其他运行环境需要移动的时候触发
StateChanged(up)当整个上传队列被改变的时候触发
UploadComplete(up,file)当队列中所有文件被上传完时触发
UploadFile(up,file)当一个文件被上传的时候触发
UploadProgress(up,file):当文件正在被上传中触发
& & 示例：/example_queuewidget.php
& &API:/plupload/docs/api/index.html
事例代码：
&%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&base href="&%=basePath%&"&
&title&My JSP 'index.jsp' starting page&/title&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&meta http-equiv="expires" content="0"&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="This is my page"&
&script type="text/javascript" src="common/plupload/moxie.js"&&/script&
&script type="text/javascript" src="common/plupload/plupload.dev.js"&&/script&
&!-- Load Queue widget CSS and jQuery --&
&style type="text/css"& @importurl(common/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);&/style&
&script type="text/javascript" src="/assets/common/jquery-1.8.2.min.js"&&/script&
&!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes --&
&script type="text/javascript" src="/2.4.21/browserplus-min.js"&&/script&
&!-- Load plupload and all it's runtimes and finally the jQuery queue widget --&
&script type="text/javascript" src="common/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js"&&/script&
&div id="uploader"&
&p&Your browser doesn't have Flash, Silverlight or HTML5 support.&/p&
$('#uploader').pluploadQueue({
url : 'Upload',
filters : [ {
title : "Image files",
extensions : "jpg,gif,png"
rename : true,
flash_swf_url : 'common/plupload/Moxie.swf',
silverlight_xap_url : 'common/plupload/Moxie.xap',
filters : {
max_file_size : '100mb',
mime_types : [ {
title : "Image files",
extensions : "jpg,gif,png"
title : "Zip files",
extensions : "zip,apk,doc,exe"
注释：1、gears：
& & & & & &2、Silverlight：
& & & & & &3、browserplus:&/browserplus/&
注意：1、分块:chrome和firefox&4+&支持。
& & & & & 2、拖拽适用于firefox和webkit内核的浏览器，windows版的safari还存在一些问题待解决。
& & & & & 3、图片缩放仅在firefox3.5+和chrome上支持，safari/opera&不支持直接数据访问选定的文件。
& & & & & 4、目前所有的浏览器不支持文件类型过滤。但是，我们填写HTML5的接受文件类型过滤属性，一旦有支持它会工作。&
& & & & &5、&多文件上传仅支持gecko和webkit内核的浏览器。
阅读(...) 评论()上传插件神器：Plupload！
之前我在博客中曾经介绍过一款基于flash上传的插件叫SWFUpload，大家可以移步到此回顾。今天，我给大家介绍一款比SWFUpload更强大的上传插件：Plupload。
大家可以点击这里看看官网的DEMO：
如果链接打不开，或者打开后看不到上传组件的可能需要翻墙，如何翻墙可以看我之前写的或者到网上搜索相关资料。
Plupload特性一：本地预览上传图片
这个功能可以说非常实用，如上面的截图类似，可以在上传之前预览即将要上传的本地图片。可以先把所有要上传的图片都选择以后，再预览图里去做一些处理。
Plupload特性二：支持本地修改图片尺寸大小
resize : {
width : 200,
height : 200,
quality : 90,
crop: true // crop to exact dimensions
以上代码就是官网例子代码上的，width和height填写重定义大小后的尺寸，其中还有一个quality质量选项，有点类似做图软件一样，一般网上的图片都不要100的质量，基本80就表现得很细腻了。
Plupload特性三：本地重命名
// Rename files by clicking on their titles
rename: true,
选择需要上传的图片或者文件以后，不仅能处理尺寸还能在上传之前自定义图片上传到服务器的文件名，如果害怕有重名情况Plupload还提供了一个名称唯一的选项unique_names:true防止重名
Plupload特性四：样式易修改
Plupload使用的是jQueryUI的的主题，所以要修改Plupload的外观就是修改jQueryUI主题的样式，熟悉jQueryUI的同学很轻易就能上手。
Plupload特性五：新
首先更新维护都比SWFUpload要新，目前SWFUpload基本没有动静了，另外Plupload还支持HTML5方式，所以它不纯碎使用SWF解决上传方案。最后它的UI是使用jQueryUI第三方，这种程序设计导致使用者很容易进行UI重构。
HTML4的简陋以及POST的传递方式让file上传的表单一直都是头疼问题，虽然HTML5(IE需要10+)可以Ajax上传但目前使用IE8或者IE9的人还占大多数，所以这也导致了Plupload这类对于兼容低端浏览器使用flash上传高级浏览器就使用HTML5的方式上传的插件很受欢迎。
文字链接：《》
文章地址：
除非标注，所有博文均为原创，转载请加文字链接注明来源
最近才刚刚开始了解html5
你是专门收集国外音乐的？
收集大家都爱听的英文歌
你的是什么博客，貌似还不是wp呀~？
Linux + nginx + tornado + MySQL 自己写的博客程序，欢迎提出宝贵意见
牛人，太牛逼了！！！
Recommendation
