第一步 引入库文件
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/plupload.full.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/plupload.browserplus.js"></script>
<!-- 国际化中文支持 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/i18n/zh_CN.js"></script>
第二步 标签
<div style="width:500px; margin:left; position:relative;">
<div id="uploader_statementPic">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
</div>
<input value="重新上传" id="Reload_statementPic" type="button">
</div>
第三步 上传并返回值
$(function(){
function plupload(name){
$("#"+name).val(null);
$("#uploader_"+name).pluploadQueue({
// General settings
url : '/service/pluploadImage.do',
runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
max_file_size : '40mb',
unique_names: true,
chunk_size: '20mb',
// responseType: 'json',
// Specify what files to browse for
filters : [
{title: "Image files", extensions: "*"},
{title: "Zip files", extensions: "zip"}
],
resize: {width: 640, height: 480, quality: 90},
// Flash settings
flash_swf_url: '/js/plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: '/js/plupload/plupload.silverlight.xap',
// multipart_params: {"file":file.id} ,
preinit : {
Init: function(up, info) { },
UploadFile: function(up, file) { },
FileUploaded: function(up, file, info) {
}
},
init : {
FileUploaded :function(up, file, res){//这个地方用于 返回已经上传的文件值 前提是后台一定要返回哦
retObject = eval("(" + res.response + ")");
var atta = retObject.message;
if($("#"+name).val()== null || $("#"+name).val()==''){
$("#"+name+"").val(atta);
}else{
$("#"+name).val($("#"+name).val()+","+atta);
}
}
}
});
}
plupload('idCardPic');
plupload('statementPic');
plupload('bankCardPic');
$('#Reload_idCardPic').click(function(){
$("#idCardPic").val(null);
plupload("idCardPic");
});
$('#Reload_statementPic').click(function(){
$("#statementPic").val(null);
plupload("statementPic");
});
$('#Reload_bankCardPic').click(function(){
$("#bankCardPic").val(null);
plupload("bankCardPic");
});
});