一、Plupload上传插件官网地址：http://www.plupload.com/download/
二、Plupload的Demo Test
1.下载相关plupload文件。demo中使用了layer组件。
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Plupload上传插件使用</title>
<link rel="stylesheet" href="js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css" /><!--Plupload样式-->
</head>
<body>
<!--Plupload插件模块 Open-->
<div class="box" style="margin:0 auto;width:500px;min-height: 300px;border:1px solid #F00;padding-left: 5px;">
<p style="text-align: center;color:red;">Plupload上传插件demo</p>
<p>最多可添加<span class="c_red">10</span>个附件，每个大小不超过1MB；
<a class="c_red" href="javascript:void(0);">上传遇到问题?</a>
</p>
<!-- 上传操作 -->
<a id="uploadBtn" class="f_commit_btn" href="javascript:void(0);">上传附件</a>
<!--上传完成页面显示文件列表以及删除操作-->
<ul class="filebox" id="fileList">
</ul>
<div id="uploader" style="display:none;">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
<p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
<div style="text-align: center;padding-bottom: 10px;">
<a id="btn" href="javascript:void(0);" onclick="submitBtn()">提交</a>
</div>
</div>
<!--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方法-->
<script>
var layerIndex;
var uploader;
$(function(){
initPlupload();//初始化上传组件
/****Test 回调 Open ***/
var data ={"files":"aaa.jpg,b.jpg"};
ajaxDataback(data);
/****Test 回调 End ***/
/**绑定上传事件*/
$(document).on("click", "#uploadBtn", function() {
//将插件对象填充到layer组件中
layerIndex = layer.open({
type:1,
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").length;
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.status;
//图片上传完成回调
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);//关闭上传弹窗层
}else {
layer.alert(fileInfo.msg);
}
}
}
});
}
/**
* 用于ajax请求回调数据。页面获取文件列表
*
* @param data 回调数据
*/
function ajaxDataback(data){
//获取文件列表
//debugger;
if(data.files.length > 0){
var aryFile = data.files.split(",");
for(var i = 0;i< aryFile.length;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(){
debugger;
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(',');
console.info(formData);
console.info(JSON.stringify(formData));
}
</script>
</body>
</html>
3.页面
