最近有用到一个PlupLoad 的文件上传控件，觉得还不错，但是找了很久网上也没有具体的使用方法或者说是很详细的使用方法，于是自己在完成功能之后就打算把这些方法给记录下来，以便后面需要使用的时候方便查看。以下简单介绍下这个上传控件。
现在随着html5技术的逐渐推广和普及，再去使用以flash为上传手段的SWFUpload显然就有点过时了，毕竟html5原生的就给我们提供了文件上传的API。Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件，简单易用且功能强大，我们完全可以使用Plupload来代替以前的SWFUpload。
Plupload有以下功能和特点：
1、拥有多种上传方式：HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。
2、支持以拖拽的方式来选取要上传的文件
3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩
4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。
以上的介绍就先到这里，接下来就是实战代码和具体用法，重头戏来了：
1，首先需要引入PlupLoad.js 和 JQuery.js 的文件：
<link href="${pageContext.request.contextPath}/style/jquery_ui/jquery-ui.css" rel="stylesheet">
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery-1.8.3.min.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery_ui/jquery-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/script/plupload/js/plupload.full.min.js"></script><!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<s:form id="ImportReportDraftCurdActionWindowForm">
<input type="hidden" id="types" name="types"/>
<table width="480px">
<tr>
<td width="70px"><a href="/aml/excel/UserListTemplate.xls">下载模板</a></td>
<td width="auto" colspan="3">
<div id="ImportReportDraftCurdActionUploaderContainer">
<ul id="ImportReportDraftCurdAction_Files" style="padding-left: 0; padding-right: 0"></ul>
<input type="file" id="ImportReportDraftCurdActionBrowseBut" value="选择文件"/>
</div>
</td>
</tr>
</table>
</s:form>
</div>
<script type="text/javascript">
var ImportReportDraftCurdActionUploader;
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'ImportReportDraftCurdActionBrowseBut', // you can pass in id...
container: document.getElementById('ImportReportDraftCurdActionUploaderContainer'),
url : '/report/uploadAttachment.action',
chunk_size : '10mb',
unique_names : true,
// Resize images on client-side if we can
resize : { width : 320, height : 240, quality : 90 },
filters : {
max_file_size : '10mb',
// Specify what files to browse for
mime_types: [
{title : "Excel files", extensions : "xls"}
]
},
multi_selection : false,
flash_swf_url : '${pageContext.request.contextPath}/script/plupload/js/Moxie.swf',
file_data_name:'upload',
silverlight_xap_url : '${pageContext.request.contextPath}/script/plupload/js/Moxie.xap',
// Post init events, bound after the internal events
init: {
PostInit: function() {
document.getElementById('uploadfileCancel').onclick = function() {
document.getElementById('ImportReportDraftCurdAction_Files').innerHTML="";
//$("input[name='Newfiless']").remove();
//$("#ImportReportDraftCurdAction_Files").remove("");
//$("#ImportReportDraftCurdActionUploaderContainer div:last").remove();
$("#dialog").dialog( "close" );
};
document.getElementById('uploadfileBtn').onclick = function() {
if ($("input[name='Newfiless']").length > 0) {
ImportReportDraftCurdActionSubmitForm(1);
} else {
alert("请选择1个文件!");
}
};
},
FilesAdded: function(up, files) { //文件上传前
if ($("input[name='Newfiless']").length>0) {
alert("只能上传一个文件");
uploader.removeFile(files[0]);
return false;
}
var fileList = $("#ImportReportDraftCurdAction_Files");
plupload.each(files, function(file) {
if(file.status == plupload.FAILED) return true;
var $duplicatedFileItem = null;
fileList.children().each(function(j, fileItem) {
if (file.name == $(fileItem).children().last().text()) {
$duplicatedFileItem = $(fileItem);
return false;
} else {
return true;
}
});
if ($duplicatedFileItem != null) {
if (confirm("附件“" + file.name + "”已经存在，是否覆盖？")) {
var $fileNameLink = $duplicatedFileItem.find("a:last-child");
if ($fileNameLink.length) {
$("#ImportReportDraftCurdActionWindowForm").append("<input type='hidden' name='Deletedfiless' value='" + $fileNameLink.text() + "' />");
} else {
var duplicatedFile = up.getFile($duplicatedFileItem.attr("id"));
if (duplicatedFile.status == plupload.QUEUED) up.removeFile(duplicatedFile);
}
$duplicatedFileItem.remove();
appendFileItem(file, fileList);
} else {
up.removeFile(file);
}
} else {
appendFileItem(file, fileList);
}
return true;
});
up.refresh();
if (up.state == plupload.STOPPED) up.start();
},
FileUploaded: function(up, file, response) { //文件上传成功的时候触发
var $fileItem = $("#" + file.id);
$fileItem.prepend("<input type='hidden' name='Newfiless' value='" + file.name + ":" + jQuery.parseJSON(response.response).fileName + "' />");
},
StateChanged: function(up) { //当上传队列的状态发生改变时触发
if (up.state == plupload.STARTED) {
$("#uploadfileBtn").attr("disabled", true);
} else {
$("#uploadfileBtn").attr("disabled", false);
}
},
Error: function(up, err) { //上传出错的时候触发
var errMsg;
switch (err.code) {
case plupload.INIT_ERROR:
//stk.debug(err);
$("#ImportReportDraftCurdActionBrowseBut").remove();
errMsg = "您的浏览器版本过低，无法使用附件上传功能";
break;
case plupload.FILE_SIZE_ERROR:
//$("#" + err.file.id).remove();
errMsg = "文件“" + err.file.name + "”过大（上限：10 MB）";
break;
default:
if (err.file) {
$("#" + err.file.id).remove();
errMsg = "文件“" + err.file.name + "”上传时出现问题";
} else {
errMsg = "附件上传功能出现问题";
}
}
alert(errMsg);
}
}
});
ImportReportDraftCurdActionUploader = uploader;
uploader.init();
function appendFileItem(file, $fileList) {
var $newListItem = $("<li />", {
id: file.id,
style: "padding: 0px 0px; width:265px; list-style:none; margin-left:3px;"
});
var $deleteLink = $("<a />", { // file may be in queue; uploading, or uploaded; fail code is not here
href: "javascript:void(0)",
html: "[删除]",
style:"display:inline-block; width:55px; font-size:12px;"
});
$deleteLink.click(function () {
var file = ImportReportDraftCurdActionUploader.getFile($(this).parent().attr("id"));
if (file && file.status == plupload.QUEUED) ImportReportDraftCurdActionUploader.removeFile(file);
$(this).parent().remove();
ImportReportDraftCurdActionUploader.refresh();
});
$newListItem.append($deleteLink);
$newListItem.append( "<span id=' + file.id + 'style='display: inline-block; text-align: left; margin: 0; padding: 0; margin-left: 2px; font-size:12px;'>"+ file.name+"</span>");
$fileList.append($newListItem);
}
$("#dialog").dialog({
title:"导入文档",
autoOpen: false,
width: 500,
buttons: [
{
text: "保存",
id: "uploadfileBtn"
},
{
text: "取消",
id: "uploadfileCancel"
}
],
using:function(){
$(this).css({
"position":"absolute",
"top":"600px" //设置弹出框距离是页面顶端下的400px
});
}
});
function ImportReportDraftCurdActionSubmitForm(val){
$.ajax({
type: "POST",
url: "userAction_importInit.action",
dataType: "json",
data: {"Newfiless":$("input[name='Newfiless']").val(),"type":val},
success: function(result){
if (result.result == "SUCCESS") {
alert("上传完毕!");
$("#dialog").dialog( "close" );
window.location.reload();
/*alert("上传完毕！", "提示", {"确认":function () {
$("#__alertDiv").dialog("close");
$(document).stk_removeSelf();
}});*/
} else if(result.errorinfo!=null){
alert(result.errorinfo);
} else {
for(var key in result){
alert(result[key]);
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('===保存失败===');
}
});
/*$("#types").val(val);
$("#ImportReportDraftCurdActionWindowForm").submit();
alert("上传成功!");*/
/*$("#ImportReportDraftCurdActionWindowForm").stk_submit(function (result) {
if (result.result == "SUCCESS") {
stk.alert("上传完毕！", "提示", {"确认":function () {
$("#__alertDiv").dialog("close");
$(document).stk_removeSelf();
}});
} else if(result.errorinfo!=null){
stk.error(result.errorinfo);
} else {
for(var key in result){
stk.error(result[key]);
}
}
});*/
}
</script>3，具体大部分的代码就是这样了，当然我只是简单的把我成功后的代码Ctrl+C、Ctrl+V 了一下，如果你们想要跑通上面的代码，还是需要静下心来好好的调试一下。如果在调试的情况下有什么问题，可以评论我看到了话都会进行回复的哦！（PlupLoad的源文件及JQuery文件 http://download.csdn.net/detail/samile6899/9808344）
5118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
