简单实现限制uploadify上传个数
简单实现限制uploadify上传个数
functiondeleteUrl(){
$("body").on("click",".img-wrap.maskspan",function(event){
event.stopPropagation();
varqs=$('#file_upload-queue>div');//所有的队列
varid=qs.eq(2).attr('id');//得到第三个队列的id
$('#uploadTowedAccredit').uploadify('cancel',id);//这样就行了,会自动重置队列数量和删除dom对象,不能直接qs.eq(2).remove(),无效
/*
if(!window.confirm("您确定删除附件?")){
return;
}
varimgUrl=$(this).parents(".img-wrap").find("img").attr("src");
deleteImage(imgUrl);
$(this).parents(".img-wrap").remove();
*/
});
};
<liclass="blockliclearfix"style="padding-bottom:5px;">
<spanclass="left-name"><emclass="red-star">*</em>拖机授权委托书:</span>
<divclass="upload-wrap"style="width:100px;">
<inputtype="file"name="uploadTowedAccredit"id="uploadTowedAccredit"class="filetext"/>
</div>
<spanid="uploadTowedAccreditLinkTip"class="warn-tips"><em></em>请上传附件,最多上传${towedAccreditPicMax}张</span>
<divid="towedAccreditDiv"class="up-img-listclearfix"></div>
</li>
//上传拖机授权委托书
functionuploadTowedAccreditInit(){
$("#uploadTowedAccredit").uploadify({
'hideButton':'true',
'preventCaching':'true',
'checkExisting':'true',
'swf':SWF,
'uploader':uploadImg,
'debug':false,
'multi':true,
'method':'post',
'preventCaching':true,
'removeCompleted':true,
'removeTimeout':10,
'requeueErrors':true,
'successTimeout':30,
'uploadLimit':${towedAccreditPicMax},
'fileObjName':'Filedata',
//单张图片最大限制
'fileSizeLimit':'1024KB',
'fileTypeDesc':'ImageFiles',
//仅限上传jpg格式图片
'fileTypeExts':'*.jpg;*.png',
'height':24,
'width':73,
'buttonText':'上传附件',
'auto':true,
'buttonClass':'uploadabtn-fff-24',
'onSWFReady':function(){
},
'onInit':function(){
//$("#file_upload-button").css("width","100");
},
//选择图片完成
'onSelect':function(){
},
//取消上传
'onCancel':function(file){
},
'onCheck':function(event,data,key){
},
//开始上传
'onUploadStart':function(file){
$('.uploadify-queue').html('');
},
//上传过程中
'onUploadProgress':function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){
$('.uploadify-queue').html('');
$("#uploadTowedAccreditLinkTip").html('<em></em>上传中...');
},
//上传完成
'onUploadComplete':function(file){
$('.uploadify-queue').html('');
$("#uploadTowedAccreditLinkTip").html('<em></em>上传成功,待提交');
},
//上传成功
'onUploadSuccess':function(file,data,response){
varobj=eval('('+data+')');
varresult=obj.result;
if(result=="true"){
varfilename=obj.filename;
$('.uploadify-queue').html('');
$('#towedAccreditDiv').append("<divclass='img-wrap'><imgwidth='112'height='84'alt=''src='"+filename+"'><divclass='mask'><em></em><span></span></div></div>");
}
},
//上传失败//附件格式不正确,请上传JPG、BMP、PNG格式文件,大小不超过3MB
'onUploadError':function(file,errorCode,errorMsg,errorString){
switch(errorCode){
case-100:
alert("上传的文件数量已经超出系统限制的"+$('#uploadTowedAccredit').uploadify('settings','queueSizeLimit')+"个文件!");
break;
case-110:
alert("文件["+file.name+"]大小超出系统限制的"+$('#uploadTowedAccredit').uploadify('settings','fileSizeLimit')+"大小!");
break;
case-120:
alert("文件["+file.name+"]大小异常!");
break;
case-130:
alert("文件["+file.name+"]类型不正确!");
break;
}
},
//上传失败//附件格式不正确,请上传JPG、BMP、PNG格式文件,大小不超过3MB
'onSelectError':function(file,errorCode,errorMsg){
varmsgText="上传失败\n";
switch(errorCode){
caseSWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
vartowedAccreditDivLen=$("#towedAccreditDiv").children().length;
msgText+="每次最多上传"+$('#uploadTowedAccredit').uploadify('settings','uploadLimit')+"个文件";
break;
caseSWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
msgText+="文件大小超过限制("+$('#uploadTowedAccredit').uploadify('settings','fileSizeLimit')+")";
break;
caseSWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
msgText+="文件大小为0";
break;
caseSWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
msgText+="文件格式不正确,仅限"+$('#uploadTowedAccredit').uploadify('settings','fileTypeExts');
break;
default:
msgText+="错误代码:"+errorCode+"\n"+errorMsg;
}
alert(msgText);
}
});
//判断用户是否有安装flash
varobj=$("#uploadTowedAccredit").children().eq(0);
if(obj.attr('type')!="application/x-shockwave-flash"){
alert('系统检测到您的浏览器没有安装flash插件,为了你能够正常上传图片,建议你安装flash');
return;
}
$("#uploadTowedAccredit").css("float","left");
};
另外给大家附上jquery+uploadify多文件上传
<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<metahttp-equiv=”Content-Type”content=”text/html;charset=UTF-8″/>
<title>phpjqueryuploadify多文件上传</title>
<linkhref=”css/default.css”rel=”stylesheet”type=”text/css”/>
<linkhref=”css/uploadify.css”rel=”stylesheet”type=”text/css”/>
<scripttype=”text/javascript”src=”js/jquery-1.3.2.min.js”></script>
<scripttype=”text/javascript”src=”js/swfobject.js”></script>
<scripttype=”text/javascript”src=”js/jquery.uploadify.v2.1.0.min.js”></script>
<scripttype=”text/javascript”>
$(document).ready(function(){
$(“#fileInput2″).uploadify({
‘uploader':‘js/uploadify.swf',//所需要的flash文件
‘cancelImg':‘cancel.png',//单个取消上传的图片
'script':‘js/uploadify.php',//实现上传的程序
‘folder':‘uploads',//服务端的上传目录
//'auto':true,//自动上传
‘multi':true,//是否多文件上传
//'checkScript':‘js/check.php',//验证,服务端的
‘displayData':'speed',//进度条的显示方式
//'fileDesc':‘Image(*.jpg;*.gif;*.png)',//对话框的文件类型描述
//'fileExt':‘*.jpg;*.jpeg;*.gif;*.png',//可上传的文件类型
//'sizeLimit':999999,//限制上传文件的大小
//'simUploadLimit':3,//并发上传数据
//'queueSizeLimit':5,//可上传的文件个数
//'buttonText':'文件上传',//通过文字替换钮扣上的文字
‘buttonImg':‘css/images/browseBtn.png',//替换上传钮扣
‘width':80,//buttonImg的大小
‘height':24,//
‘rollover':true,//button是否变换
onComplete:function(evt,queueID,fileObj,response,data){
//alert(“Successfullyuploaded:“+fileObj.filePath);
//alert(response);
getResult(response);//获得上传的文件路径
}
//onError:function(errorObj){
//alert(errorObj.info+”“+errorObj.type);
//}
});
});
</script>
<scripttype=”text/javascript”>
functiongetResult(content){
//通过上传的图片来动态生成text来保存路径
varboard=document.getElementById(“divTxt”);
board.style.display=””;
varnewInput=document.createElement(“input”);
newInput.type=“text”;
newInput.size=“45″;
newInput.name=”myFilePath[]“;
varobj=board.appendChild(newInput);
varbr=document.createElement(“br”);
board.appendChild(br);
obj.value=content;
}
</script>
</head>
<body>
<fieldsetstyle=”border:1pxsolid#CDCDCD;padding:8px;padding-bottom:0px;margin:8px0″>
<legend><strong>多文件上传</strong></legend>
<div>
<inputid=”fileInput2″name=”fileInput2″type=”file”/>
<inputtype=”button”value=”确定上传”onclick=”javascript:$(‘#fileInput2′).uploadifyUpload();”>
|| <ahref=”javascript:$(‘#fileInput2′).uploadifyClearQueue();”>清除上传列表</a></div>
<p></p>
</fieldset>
<FORMname=”form2″METHOD=POSTACTION=”db.php”>
<divid=”divTxt”style=”display:none”><spanstyle=”color:red”><strong>已经上传的图片有:</strong></span><br></div><br>
<INPUTTYPE=”submit”value=”提交”>
</FORM>
</body>
</html>