Jquery. Uploadify

  • 2020-03-29 23:46:34
  • OfStack

1. Js code:


<script type="text/javascript"> 
$(document).ready(function() { 
$('#fileInput').uploadify({ 
//The following parameters are optional
'uploader' : '<%=basePath%>images/uploadify.swf', //Specifies the body file of the upload control, 'upload.swf' by default
'script' : '<%=basePath%>UploadServlet', //Specify server-side upload processing file, default 'upload.php'
'cancelImg' : '<%=basePath%>images/cancel.png', //Specify cancel uploaded image, default 'cancel.png'
'buttonImg':'<%=basePath%>images/upload2.jpg', 
'auto' : true, //False is the default for automatically uploading a selected file
'folder' : '/userphoto' , //Server path to upload, default '/'
'multi' : false, //If multiple files are allowed to be uploaded at the same time, the default is false
'fileDesc' : ' Image files ' , //Description of the file type that appears in the upload dialog box
'fileExt' : '*.jpg;*.bmp;*.png;*.gif', //Controls the extension of the file that can be uploaded. FileDesc is declared when this item is enabled
'sizeLimit': 86400, //Controls the size of the uploaded file in bytes
'onComplete': function(event,queueID,fileObj,response,data) { 
$('#image').attr("src","<%=basePath%>userphoto/"+response); 
$('#image').show(); 
$('#photo').attr("value",response); 
}, 
'onError' : function(event, queueID, fileObj) 
{ 
alert(" file :" + fileObj.name + "  Upload failed "); 
} 
}); 
}); 
</script> 
 

2. Matters needing attention

(1) if the 'BROWSE' button is not displayed, then your 'uploader' : '< % = basePath % > Images /uploadify.swf' is not configured correctly. Check for the correct path.

(2) if you need to modify the picture of the button: you can use the 'buttonImg' configuration to replace it

(3) after the upload is completed, the 'onComplete' event is not triggered: after the background servlet has finished processing, output 1 to the page, otherwise the onComplete callback function of the page will not be executed. The response. GetWriter () write (1);

(4) if the name of the image is changed in the background servlet, the value of the image cannot be obtained through fileObj. Instead, the new filename is printed out by the background servlet: out.print(filename); In the JSP page, use response to get the new value accordingly.

(5) image preview:

Add a < to the JSP page Img SRC = "" > < / img> , modify the SRC value of img in the onComplete event when the upload is complete.

3. Download address
(link: http://www.uploadify.com/download/)


Related articles: