This article shows you how to use the jquery. uploadify plug-in to upload and preview images. on the homepage, we will look at the precautions for using jquery uploadify to upload images.
Notes
(1) If the "browse" button is not displayed on the page, your 'upload': '<% = basepath %> images/uploadify.swf' configuration is incorrect, check whether the path is correct.
(2) If you want to modify the button image, you can use the 'buttonimg 'configuration to replace it.
(3) After the upload is complete, the 'oncomplete' event is not triggered: After the backend servlet completes processing, 1 is output to the page; otherwise, the oncomplete callback function on the page is not executed. Response. getwriter (). write (1 );
(4) If the image name is changed after the servlet processing and uploading in the background, the value of the image cannot be obtained through fileobj. Instead, the new file name is output in the background servlet: out. print (filename); On the jsp tutorial page, use response to obtain the new value.
(5) image preview implementation:
Add </img> to the jsp page. After the upload is complete, modify the src value of img in the oncomplete event.
3,
Www.uploadify.com/download/
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html xmlns = "http://www.bKjia. c0m/1999/xhtml">
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> jquery. uploadify plugin for Image Upload and preview </title>
</Head><Body>
<Script type = "text/Webpage effects">
$ (Document). ready (function (){
$ ('# Fileinput'). uploadify ({
// The following parameters are optional.
'Upload': '<% = basepath %> images/uploadify.swf', // specifies the main file of the upload control, and 'uploader.swf'
'Script': '<% = basepath %> uploadservlet', // specifies the server to upload and process files. The default value is 'upload. php tutorial'
'Cancelimg': '<% = basepath %> images/cancel.png', // specify the uploaded image, 'cancel.png'
'Buttonimg ':' <% = basepath %> images/upload2.jpg ',
'Auto': true, // whether to automatically upload the selected file. The default value is false.
'Folder': '/userphoto', // path of the server to be uploaded. The default value is '/'
'Multi ': false, // whether multiple files can be uploaded simultaneously. The default value is false.
'Filedesc': 'image file', // file type description displayed in the upload dialog box
'Fileext ':' *. jpg; *. bmp; *. png; *. gif ', // controls the extension of the file to be uploaded. When this item is enabled, you must declare filedesc at the same time.
'Sizelimmit ': 86400, // controls the size of the uploaded file, in bytes
'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>
</Html>
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
