Simple implementation to limit the number of uploadify uploads
- 2020-11-03 22:00:59
- OfStack
Simple implementation limits the number of uploadify uploads
function deleteUrl(){
$("body").on("click",".img-wrap .mask span",function(event){
event.stopPropagation();
var qs=$('#file_upload-queue>div');// All queues
var id=qs.eq(2).attr('id');// Get the first 3 A queue id
$('#uploadTowedAccredit').uploadify('cancel',id);// That's it. The number of queues is automatically reset and deleted dom Object, not directly qs.eq(2).remove() Be null and void
/*
if(!window.confirm(" Are you sure to delete the attachment? ")){
return;
}
var imgUrl=$(this).parents(".img-wrap").find("img").attr("src");
deleteImage(imgUrl);
$(this).parents(".img-wrap").remove();
*/
});
};
<li class="blockli clearfix" style="padding-bottom: 5px;">
<span class="left-name"><em class="red-star">*</em> Letter of Authorization for Towing machine: </span>
<div class="upload-wrap" style="width:100px;">
<input type="file" name="uploadTowedAccredit" id="uploadTowedAccredit" class="filetext"/>
</div>
<span id="uploadTowedAccreditLinkTip" class="warn-tips"><em></em> Please upload the attachment, at most ${towedAccreditPicMax} zhang </span>
<div id="towedAccreditDiv" class="up-img-list clearfix"></div>
</li>
// Upload the tower authorization letter
function uploadTowedAccreditInit(){
$("#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',
// Single picture maximum limit
'fileSizeLimit' : '1024KB',
'fileTypeDesc' : 'Image Files',
// Only upload jpg Format images
'fileTypeExts' : '*.jpg;*.png',
'height': 24,
'width':73,
'buttonText' : ' To upload attachments ',
'auto': true,
'buttonClass':'uploada btn-fff-24',
'onSWFReady' : function() {
},
'onInit':function(){
// $("#file_upload-button").css("width","100");
},
// Select image complete
'onSelect' : function() {
},
// Cancel the upload
'onCancel' : function(file) {
},
'onCheck': function(event,data,key) {
},
// To upload
'onUploadStart' : function(file) {
$('.uploadify-queue').html('');
},
// During the upload process
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
$('.uploadify-queue').html('');
$("#uploadTowedAccreditLinkTip").html('<em></em> On the cross ...');
},
// Upload to complete
'onUploadComplete' : function(file) {
$('.uploadify-queue').html('');
$("#uploadTowedAccreditLinkTip").html('<em></em> Upload successful, ready to submit ');
},
// Uploaded successfully
'onUploadSuccess' : function(file, data, response) {
var obj = eval('(' + data + ')');
var result=obj.result;
if(result=="true"){
var filename=obj.filename;
$('.uploadify-queue').html('');
$('#towedAccreditDiv').append("<div class='img-wrap'><img width='112' height='84' alt='' src='"+filename+"'><div class='mask'><em></em><span></span></div></div>");
}
},
// Upload failed // The attachment format is incorrect, please upload it JPG , BMP , PNG Format file, size not exceeding 3MB
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
switch(errorCode) {
case -100:
alert(" The number of files uploaded has exceeded the system limit "+$('#uploadTowedAccredit').uploadify('settings','queueSizeLimit')+" A file! ");
break;
case -110:
alert(" file ["+file.name+"] Exceeding system limits in size "+$('#uploadTowedAccredit').uploadify('settings','fileSizeLimit')+" The size! ");
break;
case -120:
alert(" file ["+file.name+"] Abnormal size! ");
break;
case -130:
alert(" file ["+file.name+"] Incorrect type! ");
break;
}
},
// Upload failed // The attachment format is incorrect, please upload it JPG , BMP , PNG Format file, size not exceeding 3MB
'onSelectError' : function(file, errorCode, errorMsg) {
var msgText = " Upload failed \n";
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
var towedAccreditDivLen = $("#towedAccreditDiv").children().length;
msgText += " Maximum upload per time " + $('#uploadTowedAccredit').uploadify('settings','uploadLimit') + " A file ";
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
msgText += " The file size exceeds the limit ( " + $('#uploadTowedAccredit').uploadify('settings','fileSizeLimit') + " )";
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
msgText += " File size is 0";
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
msgText += " Incorrect file format, only " + $('#uploadTowedAccredit').uploadify('settings','fileTypeExts');
break;
default:
msgText += " Error code: " + errorCode + "\n" + errorMsg;
}
alert(msgText);
}
});
// Determine if the user has an installation flash
var obj = $("#uploadTowedAccredit").children().eq(0);
if(obj.attr('type')!= "application/x-shockwave-flash"){
alert(' The system detected that your browser is not installed flash Plug-in, in order for you to be able to upload pictures normally, it is recommended that you install flash');
return;
}
$("#uploadTowedAccredit").css("float","left");
};
In addition, I attach jquery+uploadify multi-file upload
<html xmlns= " http://www.w3.org/1999/xhtml " >
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=UTF-8 " />
<title>php jquery uploadify Multi-file upload </title>
<link href= " css/default.css " rel= " stylesheet " type= " text/css " />
<link href= " css/uploadify.css " rel= " stylesheet " type= " text/css " />
<script type= " text/javascript " src= " js/jquery-1.3.2.min.js " ></script>
<script type= " text/javascript " src= " js/swfobject.js " ></script>
<script type= " text/javascript " src= " js/jquery.uploadify.v2.1.0.min.js " ></script>
<script type= " text/javascript " >
$(document).ready(function() {
$( " #fileInput2 " ).uploadify({
' uploader': ' js/uploadify.swf',// The required flash file
' cancelImg': ' cancel.png',// Single unupload of images
'script': ' js/uploadify.php',// The program that realizes upload
' folder': ' uploads',// The server uploads the directory
//'auto': true,// Automatically upload
' multi': true,// Whether to upload multiple files
//'checkScript': ' js/check.php',// validation , server side
' displayData': 'speed',// How the progress bar is displayed
//'fileDesc': ' Image(*.jpg;*.gif;*.png)',// The file type description of the dialog box
//'fileExt': ' *.jpg;*.jpeg;*.gif;*.png',// Types of files that can be uploaded
//'sizeLimit': 999999 ,// Limit the size of uploaded files
//'simUploadLimit' :3, // Concurrent upload data
//'queueSizeLimit' :5, // Number of files that can be uploaded
//'buttonText' :' File upload ',// Replace the text on the button with text
' buttonImg': ' css/images/browseBtn.png',// Replace the upload button
' width': 80,//buttonImg The size of the
' height': 24,//
' rollover': true,//button Whether the transformation
onComplete: function (evt, queueID, fileObj, response, data) {
//alert( " Successfully uploaded: " +fileObj.filePath);
//alert(response);
getResult(response);// Get the path to the uploaded file
}
//onError: function(errorObj) {
// alert(errorObj.info+ " " +errorObj.type);
//}
});
});
</script>
<script type= " text/javascript " >
function getResult(content){
// Dynamically generate images through uploads text To save the path
var board = document.getElementById( " divTxt " );
board.style.display= "" ;
var newInput = document.createElement( " input " );
newInput.type = " text " ;
newInput.size = " 45 " ;
newInput.name= " myFilePath[] " ;
var obj = board.appendChild(newInput);
var br= document.createElement( " br " );
board.appendChild(br);
obj.value=content;
}
</script>
</head>
<body>
<fieldset style= " border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0 " >
<legend> <strong> Multi-file upload </strong></legend>
<div>
<input id= " fileInput2 " name= " fileInput2 " type= " file " />
<input type= " button " value= "Confirm upload" onclick= " javascript:$( ' #fileInput2 ' ).uploadifyUpload(); " >
|| <a href= " javascript:$( ' #fileInput2 ' ).uploadifyClearQueue(); " > Clear upload list </a></div>
<p></p>
</fieldset>
<FORM name= " form2 " METHOD=POST ACTION= " db.php " >
<div id= " divTxt " style= " display:none " ><span style= " color:red " ><strong> The pictures uploaded include: </strong></span& gt;<br></div><br>
<INPUT TYPE= " submit " value= " " >
</FORM>
</body>
</html>