SoFunction
Updated on 2025-03-10

Detailed explanation of the picture upload plug-in

1. js code:

Copy the codeThe code is as follows:

<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').uploadify({
//The following parameters are optional
'uploader' : '<%=basePath%>images/', //Specify the main file of uploading the control, default ''
'script' : '<%=basePath%>UploadServlet', //Specify the server to upload and process files, default ''
'cancelImg' : '<%=basePath%>images/', //Specify the image to cancel upload, default ''
'buttonImg':'<%=basePath%>images/',
'auto' : true, // Whether to upload automatically after selecting the file, default false
'folder' : '/userphoto' , //The server path to be uploaded, default '/'
'multi' : false, //Is it allowed to upload multiple files at the same time? The default is false
'fileDesc' : 'Image File' , //The file type description appears in the upload dialog box
'fileExt' : '*.jpg;*.bmp;*.png;*.gif', //Control the extension of the uploaded file. FileDesc must be declared at the same time when enabling this item
'sizeLimit': 86400, //Controll the size of uploaded files, unit byte
'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:" + + "Upload failed");
}
});
});
</script>
 

2. Things to note

(1) If the page does not display the "BROWSE" button, it means that your 'uploader': '<%=basePath%>images/' is configured incorrectly. Check whether the path is correct.

(2) If you need to modify the button picture: 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 is processed, 1 must be output to the page, otherwise the page's onComplete callback function will not be executed. ().write(1);

(4) If you upload the image name in the background servlet, you cannot obtain its value through fileObj, but you must output the new file name in the background servlet: (filename); On the jsp page, use response to obtain the new value accordingly.

(5) Image preview implementation:

Add an <img src=""></img> to the jsp page, and modify the src value of img in the onComplete event after the upload is completed.

3. Download address
/download/