Re: Upload and Preview Image with Javascript with making any server calls

From	kiran <kiranmbadi@gmail.com>
Newsgroups	comp.lang.javascript
Subject	Re: Upload and Preview Image with Javascript with making any server calls
Date	2011-11-08 17:21 -0800
Organization	http://groups.google.com
Message-ID	<18283602.430.1320801685563.JavaMail.geo-discussion-forums@yqie15> (permalink)
References	<10505808.1085.1320594668508.JavaMail.geo-discussion-forums@yqhd1> <2bd2fc51-c63d-4570-9aca-9f657105bc6e@e15g2000vba.googlegroups.com>

Show all headers | View raw

Thanks Micheal and Elegie for replying.I have been spending quite sometime now on this.My head is starts paining when i think about this for lack of options for further thoughts.Anyways,here is code, I wrote,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<html>

<head>

<title>file upload trial</title>

<style type="text/css">

div.clmaincontainer{

  width:30%;

  height:600px;

  border-style:solid;

  }

div.climg{

width:30%;

height:auto;

border-style:inset;

 

}

</style>

</head>

<body>

<div id="idmaincontainer" class="clmaincontainer">

<input type="file" name="img" id="idimgupload" class="climgupload"/><br></br>

<img src="" type="image/JPEG" id="my_img" class="climg">your uploaded image</img>

<div id="idimgdisplay" class="climgdisplay">

</div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script>

$(document).ready(function(){

                $('input.climgupload').change(function(){

                var path = $('#idimgupload').attr("value");

                 alert(path);   

                $('#my_img').attr('src',path );    

                               alert("test for bind");

                                });

               

});

 

</script>

</body>

</html>

This works perfectly fine in IE7,8,9 and FF 7.01 version.All I need to do it add my site to trusted sites and enable IE show the directory path while uploading files.
Now strange thing here is that it works in my office FF7.01 version and does not work on my local laptop version.So I believe there is something which needs to tweaked to make it works and definitey now a code issue.All I am doing in this is picking the path of the file and then adding it to src img tag and displaying the image.Of course its all happy path and this is crude code and needs some cleanup.
Now why I am doing this rather than other ways,basically in India , we have bandwidth issue, so if I am making 2 calls to upload and display images, its a kind of slowness to my site.I am exploring other ways as well.

I am using jquery here, but I am definitely open to plain JS or any other libaries which help me here.I would be gratefull to you all for your thoughts and suggestions.

Thread

Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-06 07:51 -0800
  Re: Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-07 16:27 -0800
  Re: Upload and Preview Image with Javascript with making any server calls Elegie <elegie@anonymous.invalid> - 2011-11-08 10:06 +0100
  Re: Upload and Preview Image with Javascript with making any server calls "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2011-11-08 04:51 -0800
    Re: Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-08 17:21 -0800
      Re: Upload and Preview Image with Javascript with making any server calls Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-09 02:51 +0100
    Re: Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-08 17:22 -0800
      Re: Upload and Preview Image with Javascript with making any server calls kiran <kiranmbadi@gmail.com> - 2011-11-08 19:20 -0800

csiph-web