display preview of an image without uploading to the server using javascript

June 18, 2014April 11, 2015 Sreejith PM Leave a comment

All of us might be tried to load preview of an image which is to be uploaded to the server. Previously we can’t do this without uploading that particular file to the server. Now the latest versions of most of the browsers supports FILEREADER Web API. Using this we can display the preview of an image file without uploading to the server, using Javascript. The Javascript code given below:



//To reduce memory usage when using file reader
var blobURL = window.URL || window.webkitURL;   

function readImgURL(input, imgTagName) {
    if (typeof FileReader !== "undefined"){
        console.log('File Reader suppported...');
        //if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                /*$('#'+ imgTagName).attr('src', e.target.result); This method consumes browser local storage heavily */
                $('#'+ imgTagName).attr('src', (blobURL.createObjectURL(input)));
            }
            reader.readAsDataURL(input);
        //}
    }
    else{
        console.log('File Reader not suppported...');
        $('#'+ imgTagName).attr('src', 'http://www.sample.com/images/no-image-icon.jpg');
    }
}

//To reduce memory usage when using file reader

var blobURL = window.URL || window.webkitURL;

function readImgURL(input, imgTagName) {

if (typeof FileReader !== "undefined"){

console.log('File Reader suppported...');

//if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function(e) {

/*$('#'+ imgTagName).attr('src', e.target.result); This method consumes browser local storage heavily */

$('#'+ imgTagName).attr('src', (blobURL.createObjectURL(input)));

}

reader.readAsDataURL(input);

//}

}

else{

console.log('File Reader not suppported...');

$('#'+ imgTagName).attr('src', 'http://www.sample.com/images/no-image-icon.jpg');

}

Change browser URL without reloading a web page

February 11, 2013June 12, 2013 Sreejith PM Leave a comment

Here, we can see the way to change the browser URL without reloading a web page using Javascript. It is a HTML5 property. It is very easy to change the browser URL while using Ajax if we want. See the example given below:



if(window.history.pushState){
    window.history.pushState({"html":<data>,"pageTitle":},"", );
}
else{
    console.log("Your Browser Not Supported");
}

if(window.history.pushState){

window.history.pushState({"html":<data>,"pageTitle":},"", );

}

else{

console.log("Your Browser Not Supported");

}

Also please note that this method never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash. For more details see

Rendering MathML properly in Windows

January 16, 2013 Sreejith PM Leave a comment

Here, I’m going to explain about the MathML rendering in Safari browser on Windows OS. When I was worked with MathML, I faced some issues while rendering in Windows (OS: XP, Windows 7) and I found the solution for it. The solution is we have to use either STIX fonts or Asana fonts in Windows.

I have downloaded those fonts and pasted in font folder inside control panel. After done this, I again take the corresponding page which contains MathML data and verified that the data is rendering well.

To download STIX fonts click here

To download Asana fonts click here

Image caching using javascript

January 12, 2013June 12, 2013 Sreejith PM Leave a comment

Here I’m going to say a simple way to cache images while loading web page using JavaScript. Well we know where the images are located in our server. So first we need to specify the path of images into an JavaScript array, which you want to cache while loading a web page as shown below:



<script type=text/javascript>
            function preCacheImages(arrImages){               
              var cachedImages = new Array();               
              var iLoopCnt = 0;               
              if(arrImages.length > 0){
                for(x in arrImages){
                  cachedImages[iLoopCnt] = new Image();
                  cachedImages[iLoopCnt].src = arrImages[x];
                }
              }
            }

            var arrImages = new Array(img path 1, img path 2, .... img path N);
</script>

function preCacheImages(arrImages){

var cachedImages = new Array();

var iLoopCnt = 0;

if(arrImages.length > 0){

for(x in arrImages){

cachedImages[iLoopCnt] = new Image();

cachedImages[iLoopCnt].src = arrImages[x];

}

var arrImages = new Array(img path 1, img path 2, .... img path N);

</script>

Copy and paste the above code inside the head tag of your web page and call the function preCacheImages() in onLoad event of body tag.

<body onload=”javascript: preCacheImages(arrImages);” >