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: https://github.com/Double-Lv/Huploadify

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):

Huploadify.css 

jquery.Huploadify.js

2, Upload code:

html is as follows

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.         });  
29.           
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