It took two days to figure out the preview function.
The task requirements are as follows:
1: The jsp page contains an image (pic_1)
2: Click the image to bring up a page similar to the resource manager.
3: select an image and preview it at pic_1.
I tried the following code on IE8 to implement the above functions. I didn't test it in other browsers. If you know how to support multiple browsers, please kindly advise and learn together. Thank you.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Insert title here </title>
<Script type = "text/javascript">
Function tempClick (){
/**
* The Firefox browser displays the file upload page when you click an image.
* Var a = document. createEvent ("MouseEvents ");
* A. initEvent ("click", true, true );
* Document. getElementById ("upload_main_img"). dispatchEvent ();
*/
// The file upload page appears when you click an image in IE
Document. getElementById ('main _ img '). click (); // call The onclick event of main_img
}
/**
* Preview an image
* @ Param obj
* @ Returns {Boolean}
*/
Function PreviewImg (obj ){
Var newPreview = document. getElementById ("img_2 ");
Var imgPath = getPath (obj );
Alert (imgPath );
If (! Obj. value. match (/. jpg |. gif |. png |. bmp/I )){
Alert ("incorrect image format! ");
Return false;
}
NewPreview. style. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = scale )";
NewPreview. filters. item ("DXImageTransform. Microsoft. AlphaImageLoader"). src = imgPath;
}
/**
* Obtain the absolute path of the image.
* @ Param obj
* @ Returns
*/
Function getPath (obj ){
If (obj ){
If (navigator. userAgent. indexOf ("MSIE")> 0 ){
Obj. select ();
// Obtain the local path of the image in IE
Return document. selection. createRange (). text;
} Else if (isFirefox = navigator. userAgent. indexOf ("Firefox")> 0 ){
If (obj. files) {// the image data obtained in Firefox
Return files. item (0). getAsDataURL ();
}
Return obj. value;
}
Return obj. value;
}
}
</Script>
</Head>
<Body>
<Form>
<Div> <input type = "file" style = "position: absolute; filter: alpha (opacity = 0); opacity: 0; width: 30px; "size =" 1 "id =" main_img "name =" main_img "onchange =" PreviewImg (this) "> </div>
<Div id = "img_2" style = "width: 133px; height: 95px; cursor: pointer; background-image: url('Chrysanthemum.jpg ');" onclick = "tempClick () "> </div>
</Form>
</Body>
</Html>
Briefly explain the Code:
Input type = "file", I tried to hide the style (style = "display: none"), so that the absolute path cannot be obtained, but fakepath, in order not to display it, it will make it 100% transparent. There is a div with the id of img_2. This div is the initial Page image, click this image to call the method in input type = "file" to implement this function.
Limited capabilities. Please kindly advise. If you have any better solutions, please provide them to me and learn together, Thanks.
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
