简单实现限制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>