Recommend Huploadify to upload pictures or files

Keywords: JQuery Firefox Mobile Android

In the previous project, uploadify(flash version) was used to realize the image upload function. The upload plug-in browser that relies on flash is not compatible enough, so Huploadify was used to replace uploadify for the following reasons:

1. Does not depend on flash.

2. The library file size is one third of uploadify.

3. Browser compatibility test, support ie11, Firefox (version 33.1.1), chrome (version 38.0.2125), mobile support Android, iPhone image upload (other browsers are not tested).

4. Do not change the server.

1, Next, install Huploadify:

git download address:

After downloading, the following css and JS files will be introduced in the head (jquery.Huploadify.js will be introduced after the jQuery library file):



2, Upload code:

html is as follows

  1. < img src = "" alt = "" class="cardImg" id = "imgid" / > <! -- preview picture -- >
  2. < div id = "fileid" >

js is as follows

  1. /* 
  2. *Public methods for image upload 
  3. *domName  ID of the div uploaded by the picture 
  4. *domPic  Display the ID of img after uploading, if there is no picture preview, it can not be set 
  5. */  
  6. function uploadInit(domName,domPic){  
  7.         $("#"+domName).Huploadify({  
  8.             auto:true,  
  9.             fileTypeExts:'*.*',  
  10.             multi:false,  
  11.             fileObjName:'Filedata',  
  12.             fileSizeLimit:99999999999,  
  13.             showUploadedPercent:false,  
  14.             buttonText:'upload',  
  15.             uploader:param.uploadurl,  
  16.             onUploadSuccess:function(file,data){  
  17.                 var Data=JSON.parse(data);  
  18.                 if(Data.success==true){  
  19.                      $("#"+domPic).attr("src",Data.result);  
  20.                     param.uploadsuccess(Data.result);  
  21.                 }else{  
  22.                      jQuery.longhz.alert(Data.resultDes);  
  23.                 }  
  24.             },  
  25.             onUploadError:function(file,response){  
  26.                 jQuery.longhz.alert("Upload failed!");  
  27.             }  
  28.         });  
  30.     }  
  31. //Call public method  
  32. uploadInit("fileid","imgid");  

3, Configuration of Huploadify
Open jquery.Huploadify.js to see the complete configuration items of Huploadify, as follows:

  1. var defaults = {  
  2.             fileTypeExts:'*.*',//File types allowed to upload, format '*. jpg;*.doc'  
  3.             uploader:'',//Address of document submission  
  4.             auto:false,//Enable auto upload  
  5.             method:'post',//How to send a request, get or post  
  6.             multi:true,//Allow multiple files to be selected  
  7.             formData:null,//Parameters sent to the server, format: {key1:value1,key2:value2}  
  8.             fileObjName:'file',//Accept the parameter name of the file in the backend, such as $_FILES['file '] in PHP  
  9.             fileSizeLimit:2048,//File size allowed to upload, in kilobytes  
  10.             showUploadedPercent:true,//Whether to display the percentage of uploads in real time, such as 20%  
  11.             showUploadedSize:false,//Whether to display the uploaded file size in real time, such as 1M/2M  
  12.             buttonText:'Select file',//Upload text on button  
  13.             removeTimeout: 1000,//Disappearance time of progress bar after upload, in milliseconds  
  14.             itemTemplate:itemTemp,//Upload the template displayed in the queue  
  15.             onUploadStart:null,//Actions at the beginning of upload  
  16.             onUploadSuccess:null,//Upload successful actions  
  17.             onUploadComplete:null,//Upload completed actions  
  18.             onUploadError:null//Upload failed actions  
  19.             onInit:null,//Actions at initialization  
  20.             onCancel:null,//The callback function after deleting a file can be passed in the parameter file  
  21.             onClearQueue:null,//The callback function after clearing the upload queue is triggered when cancel is called and the parameter * is passed in  
  22.             onDestroy:null,//Triggered when the destroy method is called  
  23.             onSelect:null,//The callback function after selecting a file can be passed in the parameter file  
  24.             onQueueComplete:null//Triggered after all files in the queue are uploaded  
  25.         }  

You can basically understand the notes. If you don 't understand, you can find the corresponding method definition and the use conditions of the knowable method. For example

  1. onUploadSuccess: triggered when the return status status is 200
  2. onUploadError: triggered when the return status status is not 200
  3. onUploadComplete: triggered after onUploadSuccess or onUploadError is triggered

Posted by dr.wong on Fri, 01 May 2020 15:17:11 -0700