私人总结以及使用.
页面中也用swfupload.js,加入相应的文件夹
还有标签
${subinfo_index}的意思是list中的次数依次叠加1,2,3......如果有多个实例的话，能用到，一个的话就不用了，实例中的参数也不用写了，还有index.
<div id="uploadFileShowUL${subinfo_index}"></div>
<script type="text/javascript">
initSerFlow_upload(${subinfo_index});
</script>
<input id="fileName${subinfo_index}" name="fileName${subinfo_index}" " type="hidden">
<input id="uniqueName${subinfo_index}" name="uniqueName${subinfo_index}" " type="hidden">
<input id="fileSize${subinfo_index}" name="fileSize${subinfo_index}" " type="hidden">
<input id="filePath${subinfo_index}" name="filePath${subinfo_index}" " type="hidden">
<b id="spanButtonPlaceholder${subinfo_index}"></b>
//上传上的每个文件都有进度条的话，只要这个，这个demo就是每个文件都有进度条,页面不需要，js中添加
//只有一个进度条的话，页面添加
<div style="overflow:hidden;">
<div id="divFileProgressContainer" style="left"></div>
</div>
<b id="spanButtonPlaceholder${subinfo_index}"></b>
<div id="progressbar" class="progress-bar-ser"><span id="schedule" class="schedlue"></span></div>
<p class="progress-nb" id="progress"></p>
在加入一个serflow_submit_info.js里面是swfupload的实例以及其他方法
/**公共方法*/
//校验特殊字符
function checkStr(s,patten){
if(patten =="" || patten==null){ patten=new RegExp("[~'!@#$%^&*()-+_=:]");}
if(s !="" && s!=null){
if(patten.test(s)==false){return false;}else{ return true;}
}
}
//截取过长的文件名称
functin subFileName(fileName,num){
var subName="";
if(fileName.length>num){subName=fileName.substring(1,num)+"..."}else{
subName=fileName;
}
return subName;
}
//格式化文件大小单位
function formatBytes(value){
if(null==value || value==""){ return "0 Bytes";}
var unitArr =new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
var index=0;
var srcsize=parseFloat(value);
var quotient=srcsize;
while(quotient>1024){
index+=1;
quotient=quotient/1024;
}
//return Math.floor(quotient,2)+" "+unitArr[index];
return quotient.toFixed(2)+" "+unitArr[index];
}
/**附件上传开始swfupload*/
var swfu =new Array();//全局
var fileType="*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.pdf;*.txt;*.jpg;*.JPG;*.bmp;*.BMP;*.png;*.PNG;*.jpeg;*.JPEG";
function initSerFlow_upload(index){
swfu[index] =new SWFUpload({
upload_url : "uploadFile.do",//上传到control，方法上传
file_size_limit: '5120',//5MB
file_types:fileType;//上传类型
file_types_description:"所有文件";
file_post_name: "ecspfile";
post_params :{
"operator":userId,//获取当前用户id
"format" :"*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.pdf;*.txt;*.jpg;*.JPG;*.bmp;*.BMP;*.png;*.PNG;*.jpeg;*.JPEG";//暂不用
},
file_upload_limit:"0",//上传文件队列多0个（o代表不受限制）
file_queue_error_handler: fileQueueError,//选择文件后出错
file_dialog_complete_handler: fileDialogComplete,//选择好文件后提交
file_queued_handler: fileQueued,
upload_start_handler: uploadStart,
upload_progress_handler:uploadProgress,
//upload_error_handler: uploadError,
upload_success_handler: uploadSuccess,
upload_complete_handler: uploadComplete,
swfupload_loaded_handler : loadedInit,
button_image_url:"/img/upload_attch.png",//按钮背景
button_placeholder_id:"spanButtonPlaceholder"+index,
button_width:134,
button_height:13,
//button_text_top_padding:1,
// button_text_left_padding:1,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
button_action: SWFUpload.BUTTOn.ACTION.SELECT_FILE,//上传选择文件只能单选
use_query_string:true,
flash_url: "/swfupload/swfuoload.swf",
custom_settings:{
upload_target: "divFileProgressContainer"+index,
experIndex:index//参数
},
debug:false
//是否显示调试窗口
});
]
//上传文件
function fileDialogComplete(numFileSelected, numFilesQueued, numFilesInQueue){
var experIndex=this.customSettings.experIndex;//获取实例的参数
$("#schedule"+experIndex).attr('style','width:0%',);
$("#progressbar"+experIndex).css("visibility","visible");
}
function loadedInit(){
//如果初始化加载实例需要操作的话，这里执行
}
//开始上传
function uploadStart(file){
var experIndex=this.customSettings.experIndex;//获取实例的参数
var stats=swfu[experIndex].getStats();
swfu[experIndex].setButtonDisabled(true);
var fileName=$("#fileName"+experIndex).val().split(",");
if(checkStr(file.name)==true){
alert("附件名称还有非法字符(~'!@#$%^&*()-+_=:)");
clearFileQueued(file,experIndex);
swfu[experIndex].setButtonDisabled(false);
return false;
} else if(fileName!=file.name && index==10 && unqiqueNameFile==undefined){//不是覆盖
createUploadFileUIDom(file,"wangyf2",experIndex);
}
}
//上传进度条.每个文件都有自己的进度条
function uploadprogress(object,complete,bytes){
var experIndex=this.customSettings.experIndex;
var stats=swfu[experIndex].getStats();
$("#schedule"+experIndex+object.id).attr("style",'width:'+(complete/bytes*100)+'%');
$("#progress"+experIndex+object.id).html("上传中("+Math.floor(complete/bytes*100)+")%");
}
//上传一个文件成功后，触发的事件
function uploadComplete(file){
var experIndex=this.customSettings.experIndex;
try{
}catch(ex){
this.debug(ex);
}
}
//上传成功后
var index=10;
var fileUnqueName="";
function uploadSuccess(file,serverData,responseReceived){
var experIndex=this.customSettings.experIndex;
var result=$.parseJSON(eval(serverData));
var fileName=$("#fileName"+experIndex).val().split(",");
//储存的真实名字
var uniqueName=$("#uniqueName"+experIndex).val().split(",");
var stats=swfu[experIndex].getStats();
if(result.retCode=="000000"){
fileUnqueName=result.ecspFileInfo.uniqueName;
//累加文件名称
addUploadFileName(uniqueName,fileUnqueName,fileName,file,experIndex);
//也可以成功后创建文件
//createUploadFileUIDom(file,uniqueName,experIndex);
//只有一个，覆盖后的，存在文件的唯一名称
if(fileName!=file.name && index==10 && unqiueNameFile==undefined){
//处理fileUnqueName
$("a").each(function(){
if($(this).attr("onclick")!="" && $(this).attr("onclick")!=undefined && $(this).attr("onclick").indexOf(file.name)>0){
var onck=$(this).attr("onclick").replace("wangyf2",uniqueName);
$(this).attr("onclick",onck);
}
});
$("#schedule"+experIndex+file.id).attr('style','width:100%');
$("#progress"+experIndex+file.id).html("上传中("+"100%)");
$("#progress"+experIndex+file.id).removeClass("mr15");
alert("上传成功");
}else {//文件覆盖
$("#schedule"+experIndex+file.id).attr('style','width:100%');
$("#progress"+experIndex+file.id).html("100%");
unqiqueNameFile=undefined;
index=10;
}
setTimeout(function(){
$("#schedule"+experIndex+file.id).css('visibility',hidden');
$("#progress"+experIndex+file.id).attr("style","display:none");
$(".progress-nb").html();
},500);
}else if (result.retCode=="999007"){
//处理文件格式不正确后的数量限制
stats.successful_uploads--;
swfu[experIndex].setStats(stats);
alert("文件格式不正确");
setTimeout(function(){
$("#progressbar"+experIndex+file.id).css("'visibility'","hidden'");
$("#schedule"+experIndex+file.id).attr("style","display:none");
$(".progress-nb").html();
},500);
}
swfu[experIndex]..setButtonDisabled(false);
//限制数量
if(stats.successful_uploads>=1 && stats.successful_uploads<=2){
swfu[experIndex].setButtonImageURL("/img/continue_upload.png");//换背景
swfu[experIndex].setButtonDisabled(false);
}else if(stats.successful_uploads>=3){
swfu[experIndex].setButtonImageURL("/img/continue_upload.png");//换背景
swfu[experIndex].setButtonCursor(SWFUpload.CURSOR.ARROW);//鼠标属性
swfu[experIndex].setButtonDisabled(true);//不能点击
}
}
function getReurnPath(file,serverData){
if(responsePaths==""){
responsePath=responsePath+serverData;
}else{
responsePath=responsePath+","+serverData;
}
}
function startUploadFile(){
var experIndex=this.customSettings.experIndex;
swfu[experIndex].startUpload();
}
function fileQueueError(file,code,message){
if(file.size==0){
alert("不能上传文件大小为0MB的文件");return;
}
if(code==SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT){
alert("所选文件超过指定大小，最大支持5M");return;
}
}
/**
function fileQueueError(file,code,message){
try{
switch(code){
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
expecialShowMsg("不能上传文件大小为0MB的文件");
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
expecialShowMsg("所选文件超过指定大小，最大支持5M");
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
expecialShowMsg("所选文件类型不正确");
break;
default:
expecialShowMsg(message);
break;
}
}catch(ex){
this.debug(ex);
}
}
*/
/**清空文件上传列队*/
function clearFileQueued(file,experIndex){
swfu[experIndex].customSettings.queue=swfu[experIndex].customSettings.queue || new Array();
swfu[experIndex].cancelUpload(swfu[experIndex].customSettings.queue.pop(),false);
}
function fileQueued(file){
var experIndex=this.customSettings.experIndex;
var uploadFileName=file.name;
var fileAllSize=$("#fileAllSize"+experIndex).val();//获取文件上传的总大小
fileAllSize=parseInt(fileAllSize)+parseInt(file.size);//当前文件大小+已上传文件总大小
if(fileAllSize>5242880){//5MB
//清空上传队列
clearFileQueued(file,experIndex);
alert("上传文件总容量不能大于5M");
return ;
}
//储存已上传文件大小
$("#fileAllSize"+experIndex).val(fileAllSize);
//如果不存在同名文件，直接上传
var checkFlag=checkUploadFileName(uploadFileName,experIndex);
if(checkFlag==false){
swfu[experIndex].startUpload();
}else{
confim("提示",'已包含一个名为"'+subFileName(uploadFileName,25)+'"的文件,是否覆盖？',"确定","取消",function(){
//删除存在的文件，再上传当前文件
//var index;
var indexValue;
var SerAttrs=new Array();
realizeSerAttrs=$("#fileName"+experIndex).val().split(",");
for(var i=0,i<realizeSerAttrs.length;i++){
if(realizeSerAttrs[i]==uploadFileName){index=i;}
}
var SerImg=new Array();
SerImg=$("#uniqueName"+experIndex).val().split(",");
for(var j=0,i<SerImg.length;j++){
indexValue=SerImg[index];
}
deleteUploadFile(uploadFileName,indexValue,experIndex);
},function(){
//清空上传列队
clearFileQueued(file,experIndex);
})
}
}
//从上传文件列表中删除所选择的文件
function deleteUploadFile(uploadFileName,uniquName,experIndex){
var fileNames=$("#fileName"+experIndex).val();
var fileNamesArray=fileNames.split(",");
//如果只有一个文件，直接清空列表
if(fileNamesArray.length==1){
//执行删除文件操作
subdeleteUploadFile(-1,fileNamesArray,uniquName,experIndex);
}else{
for(var i=0;i<fileNamesArray.length;i++){
if(fileNamesArray[i]==uploadFileName){
//执行删除文件操作
subdeleteUploadFile(i,fileNamesArray,uniquName,experIndex);
break;
}
}
}
}
//覆盖删除操作
function subdeleteUploadFile(i,fileNamesArray,uniquName,experIndex){
//执行删除文件上传
$.ecspCORS.invokeCORSGet(ECSP_UPLOAD_URL+"/delete/"+uniqueName+".do",function(respionseText){
var result=$.parseJSON(eval(respionseText));
if(result.retCode=="000000"){
var stats=swfu[experIndex].getStats();
stats.successful_uploads--;
swfu[experIndex].setStats(stats);
swfu[experIndex].startUpload();
}
})
}
//累加上传的文件名称
var unqiueNameFile;
function addUploadFileName(uniqueName,uniqueNameValue,fileName,file,experIndex){
if(fileName==""){
$("#fileName"+experIndex).val(file.name);
$("#uniqueName"+experIndex).val(uniqueNameValue);
}else{//删除数组中的重复记录，
var flag=false;
for(var i=0;i<fileName.length;i++){
if(fileName[i]==file.name){
index=i;
flag=true;
break;
}else{
continue;
}
}
if(flag==false){
fileName.push(file.name);
uniqueName.push(uniqueNameValue);
}else{
//修改唯一名称
var indexValue=uniqueNameValue;
for(var j=0;j<uniqueName.length;j++){
if(j==index){
uniqueNameFile=uniqueName[index];
uniqueName[index]=indexValue;
}
}
}
if(uniqueNameFile!=undefined){//覆盖后删除，修改删除按钮参数
$("a").each(function(){
if($(this).attr("onclick")!="" && $(this).attr("onclick")!=undefined && $(this).attr("onclick").indexOf(uniqueNameFile)>0){
var onck=$(this).attr("onclick").replace(uniqueNameFile,uniqueNameValue);
$(this).attr("onclick",onck);
}
});
}
$("#fileName"+experIndex).val(file.name.toString());
$("#uniqueName"+experIndex).val(uniqueName.toString()););
}
}
//校验文件上传是否存在同名文件
function checkUploadFileName(uniqueFileName,experIndex){
var checkFlag="";
var fileNames= $("#fileName"+experIndex).val();
if(fileNames=="" || fileNames==undefined){
checkFlag=false;
}else{
var fileNamesArray=fileNames.split(",");
var namesSize=fileNamesArray.length;
for(var i=0;i<namesSize;i++){
if(fileNamesArray[i]==uploadFileName){
return checkFlag=true;
}else{
checkFlag=false;
}
}
}
return checkFlag;
}
//动态创建上传文件显示列表
var times="";
function creatUploadFileUIDom(file,uniqueName,experIndex){
//根据不同的文件类型显示图片
var imgSrc="";
if(file.type==".doc" || file.type==".docx"){
imgSrc="file_word";
}else if(file.type==".pptx" || file.type==".ppt"){
imgSrc="file_ppt";
}else if(file.type==".xls" || file.type==".xlsx"){
imgSrc="file_excel";
}else if(file.type==".pdf"){
imgSrc="file_pdf";
}else if(file.type==".txt"){
imgSrc="file_txt";
}else if(file.type==".jpg" || file.type==".bmp" || file.type==".png" || file.type==".jpeg" ){
imgSrc="file_img";
}else if(file.type==".zip" || file.type==".rar" ){
imgSrc="file_ys";
}else{
imgSrc="file_pt";
}
//获取当前系统时间戳
var timestamp=new Date().getTime();
var deleteUploadFileFun="deleteUploadFileUIDom('"+file.name+"','"+timestamp+"','"+uniqueName+"','"+experIndex+"');";
times=timestamp;
//创建上传文件列表
var showStr="";
showStr+='<li id='+timestamp+'>';
showStr+="<div class='file_icon"+imgSrc+"'></div>";
showStr+="<div class='media-body'>";
showStr+="<p class="file_name"> <span class='font_h'>" +subFileName(file.name,25)+"</span> ";
showStr+="<span class='grys'>(" +formatBytes(file.size)+")" +"</span></p>";;
showStr+="<p>";
showStr+='<span class=" grys progress-nb mr15" id="progress'+experIndex+file.id+'"></span>';
showStr+='<a onclick="'+deleteUploadFileFun+'" class="font_blue">删除</a>';
showStr+="<p>";
showStr+="</div></li>";
if($("#uploadFileShowUI"+experIndex).html()==""){
$("#uploadFileShowUI"+experIndex).html(showStr);
}else{
$("#uploadFileShowUI"+experIndex).append(showStr);
}
}
//从上传文件列表中删除所选择的文件
function deleteUploadFileUIDom(uploadFileName,deleteLiId,uniquName,experIndex){
var fileNames=$("#fileName"+experIndex).val();
var fileNamesArray=fileNames.split(",");
//如果只有一个文件，直接清空列表
if(fileNamesArray.length==1){
//执行删除文件操作
submitDeleteUploadFile(-1,fileNamesArray,deleteLiId,uniquName,experIndex);
}else{
for(var i=0;i<fileNamesArray.length;i++){
if(fileNamesArray[i]==uploadFileName){
//执行删除文件操作
submitDeleteUploadFile(i,fileNamesArray,deleteLiId,uniquName,experIndex);
break;
}
}
}
}
//删除文件服务器上的资料
function submitDeleteUploadFile(arrayIndex,fileNames,deleteLiId,uniquName,experIndex){
//执行删除文件上传
confim("删除附件","确定删除附件?","确定","取消",function(){
$.ecspCORS.invokeCORSGet(ECSP_UPLOAD_URL+"/delete/"+uniqueName+".do",function(respionseText){
var result=$.parseJSON(eval(respionseText));
if(result.retCode=="000000"){
var inputValut="";
var uniqueNameValue="";
var uniqueNameArray=$("uniqueName"+experIndex).val().split(",");
for(var i=0;i<uniqueNameArray.length;i++){
if(uniqueNameArray[i]==uniqueName){continue;}else{
uniqueNameValue+=uniqueNameArray[i]+",";
}
}
if(uniqueNameValue!=""){
uniqueNameValue=uniqueNameValue.substring(1,uniqueNameValue.length-1);
}
$("#uniqueName"+experIndex).val(uniqueNameValue);
$("#"+deleteLiId).remove();//删除页面相对应的文件
//获取删除的文件在文件名字字符串中的位置，并删除
var delFilename=fileNames.splice(jQuery.inArray(fileNames[arrayIndex],fileNames),1);//定义删除的文件所在位置
for(var i=0;i<fileNames.length;i++){
if(fileNames[i]==delFilename){continue;}else{
inputValut+=fileNames[i]+",";
}
}
if(inputValut!=""){
inputValut=inputValut.substring(1,inputValut.length-1);
}
$("#fileName"+experIndex).val(inputValut);
//处理删除文件后的数量限制
var stats=swfu[experIndex].getStats();
stats.successful_uploads--;
swfu[experIndex].setStats(stats);
if(stats.successful_upload<1){
swfu[experIndex].setButtonImageURL("/img/continue_upload.png");//换背景
swfu[experIndex].setButtonCursor(SWFUpload.CURSOR.HAND);//鼠标属性
swfu[experIndex].setButtonDisabled(false);
}else if(stats.successful_upload>=1 && stats.successful_upload<=2){
swfu[experIndex].setButtonImageURL("/img/continue_upload.png");//换背景
swfu[experIndex].setButtonCursor(SWFUpload.CURSOR.HAND);//鼠标属性
swfu[experIndex].setButtonDisabled(false);
}
alert("删除成功");
}else{
alert("删除失败");
}
});
})
}