Qaium's IT Demonstration: Upload, Show and Zoom in/out Image in Oracle Apex 5.1 step by step.

Tuesday, August 8, 2017

Upload, Show and Zoom in/out Image in Oracle Apex 5.1 step by step.

Here I write to Upload, Show and Zoom in/out Image in Oracle Apex 5.1 step by step.

1. Create a Page >> Then create a Region with a suitable name like "Image Upload" >> Then create a Item for uploading image suitable name like "P3_Image" >> So make type as File Browse.

2. Then create another Region for showing the image with a suitable name like "Image Show".

3. Then click on then name of page and find out HTML HEADER option and write the given code.

THIS CODE IS FOR READING THE URL WHERE YOU UPLOAD THE IMAGE.HERE IS A JAVASCRIPT FUNCITON.

<script>
function readURL(input) {
if (input.files && input.files[0])
{
var reader=new FileReader();
reader.onload = function(e){
$('#myImg')
.attr('src',e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}

</script>

4. Now click on the second region call "Image Show" and find out SOURCE option TEXT. here write the code.

THIS CODE IS FOR SHOW THE IMAGE WITH ZOOM AND ZOOM OUT. HERE IS TWO JAVASCRIPT FUNCTION AND TWO CLASS OF CSS.

<head>
<script>

function zoom(){
var divlClass=$('#myDiv').attr('class');
if (divlClass==="ex"){
$('#myDiv').css('cursor','zoom-in');}else
if ( divlClass=== "exZoom" ) {
$('#myDiv').css('cursor','zoom-out');}
}

function my_class(){
var divlClass= $('#myDiv').attr('class');
if(divlClass=== "ex"){
$("#myDiv").removeClass("ex");
$("#myImg").removeClass("ex");
$("#myDiv").addClass("exZoom");
$("#myImg").addClass("exZoom");} else
if(divlClass==="exZoom"){
$("#myDiv").removeClass("exZoom");
$("#myImg").removeClass("exZoom");
$("#myDiv").addClass("ex");
$("#myImg").addClass("ex");}
}
</script>

<style>
.ex
{
height:120px ;
width:150px;
padding:2px ;
}
.exZoom
{
height:1000px;
width:1000px;
padding:0px;
}

</style>
</head>
<div align="center">
<div id="myDiv" class="ex">
<img id="myImg" class="ex" onmouseover="zoom();" onClick="my_class(); zoom();" src="#" alt="" />

</div> </div>

Watch Video To get all code's more fresh click here

5. And Finally go to the first region and the item what you was create.Click on the item and Find     out "CUSTOM ATTRIBUTE" and write the code.

onchange="readURL(this);" onload="readURL(this);"

DON'T FORGET TO SAVE PAGE AFTER DOING EVERY TASK