The article is to tell you how to use the Jquery.uploadify plug-in to achieve image upload and preview effect, home we want to see about using jquery uploadify upload pictures to pay attention to.
Attention matters
(1), if the page does not show the "Browse" button, then your ' uploader ': ' <%=basepath%>images/uploadify.swf ' configured incorrectly, check the path is correct.
(2), if you need to modify the picture of the button: You can use ' buttonimg ' configuration to replace
(3), upload completed, the ' OnComplete ' event did not trigger: After the background servlet processing, to the page output 1, otherwise the page OnComplete callback function will not be executed. Response.getwriter (). write (1);
(4), if in the background servlet processing upload will be the name of the picture change, you can not get its value through Fileobj, but to the background servlet output new file name: Out.print (filename); On the JSP tutorial page, use response to get the new value.
(5), Picture preview realization:
Add a </img> to the JSP page, and modify the IMG src value in the OnComplete event after the upload is complete.
3, download the address
www.uploadify.com/download/
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> realize picture upload and preview effect jquery.uploadify plugin </title><body>
<script type= "text/web Effects" >
$ (document). Ready (function () {
$ (' #fileinput '). Uploadify ({
The following parameters are optional
' Uploader ': ' <%=basepath%>images/uploadify.swf ',//Specify upload control's principal file, default ' uploader.swf '
' Script ': ' <%=basepath%>uploadservlet ',//Specify server-side upload processing file, default ' upload.php tutorial '
' cancelimg ': ' <%=basepath%>images/cancel.png ',//Specify cancel upload picture, default ' Cancel.png '
' buttonimg ': ' <%=basepath%>images/upload2.jpg ',
' Auto ': true,//or automatically uploaded after the file is selected, default False
' Folder ': '/userphoto ',//server path to upload, default '/'
' Multi ': false,//whether to allow multiple files to be uploaded at the same time, default false
' Filedesc ': ' Picture file ',//File type description appearing in the Upload dialog box
' Fileext ': ' *.jpg;*.bmp;*.png;*.gif ',//control the extension of the file can be uploaded, when enabling this item must also be declared Filedesc
' SizeLimit ': 86400,//control the size of the uploaded file, unit byte
' OnComplete ': function (event,queueid,fileobj,response,data) {
$ (' #image '). attr ("src", "<%=basepath%>userphoto/" +res ponse);
$ (' #image '). Show ();
$ (' #photo '). attr ("value", response);
},
' OnError ': function (event, Queueid, Fileobj) {
Alert ("File:" + fileobj.name + "upload failed");
}
});
});
</script></body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
