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(); " >&nbsp;&nbsp;
||&nbsp;&nbsp;<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>


Related articles: