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 19:20 -0800
Organization	http://groups.google.com
Message-ID	<14564814.175.1320808845402.JavaMail.geo-discussion-forums@yqiu15> (permalink)
References	<10505808.1085.1320594668508.JavaMail.geo-discussion-forums@yqhd1> <2bd2fc51-c63d-4570-9aca-9f657105bc6e@e15g2000vba.googlegroups.com> <15854366.119.1320801760267.JavaMail.geo-discussion-forums@yqiu15>

Show all headers | View raw

kiran wrote: 

> 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. 

So does mine when I try to make sense of your postings.  You could at least 
*try* to post something easily readable.  Or is that already too much to ask 
for from a Google Groups user? 

<http://www.catb.org/~esr/faqs/smart-questions.html> 
<http://www.netmeister.org/news/learn2quote.html> 
<http://jibbering.com/faq/notes/posting> 

Kiran: Fair enough reply Thomas.I should have posted just a couple of lines rather than copy pasting the code.My bad.

> 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"> 

1. Don't declare and use XHTML unless you really understand and need it. 
   Declare and use HTML. 

2. If you declare XHTML, make it *Valid* at least. 

<http://validator.w3.org/> 

Kiran: I was aware of this,but somehow missed it to correct it.But i admit, i have lot to understand.

> <html> 
> 
> <head> 
> 
> <title>file upload trial</title> 
> 
> <style type="text/css"> 
> 
> div.clmaincontainer{ 
> 
>   width:30%; 
> 
>   height:600px; 

3. Don't use pixel-sized widths or heights unless necessary. 

>   border-style:solid; 

Since the initial border width is 0, this is pointless. 

Kiran: This advice is very much appreciated.I assume that different screen size impacts pixels dimensions more and cannot dynamically adjusted.So its bad idea to have pixel size dimensions.

>   } 
> 
> div.climg{ 
> 
> width:30%; 
> 
> height:auto; 

`auto' is the initial value. 

> border-style:inset; 

Again, pointless.  There is no border.

>   
> 
> } 
> 
> </style> 
> 
> </head> 

Not Valid. 

> <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 

MIME types are registered lowercase. 

Kiran: Its typo error.However thanks for pointing it.

> image</img> 

Not Valid (X)HTML.  The `img' element has the content model EMPTY. 

> <div id="idimgdisplay" class="climgdisplay"> 
> 
> </div> 
> 
> </div> 
> 
> <script 
> 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

1. Do not use jQuery 1.5.  The current version is 1.7. 
2. Do not use jQuery from somewhere; download it to your webspace instead. 
3. Do not use jQuery at all.  Pretty junk is still junk. 

> <script> 

Kiran: This code was written in notepad and its more of rough cut.Also definitely using google/MS cdn helps when you are away from IDE.I am not a web designer by profession.So cannot really commment on Jquery.But i have same logic written in javascript with same results.

Not Valid XHTML 1.0. 

> […] 

> 
> </html> 
> 
> This works perfectly fine in IE7,8,9 and FF 7.01 version. 

Doubtful.  If so, then by sheer coincidence. 

Kiran: Can you try this in your machine and let me know if works.I did search google and there were cases where it has worked for folks.I can see it working in my machine for IE 9.

> All I need to do it add my site to trusted sites and enable IE show the 
> directory path while uploading files. 

If you expect your users to do the same, you are most certainly mistaken. 

Kiran: I own the site and I am going to sell it.I have sold stuffs for good part of my career before coming to IT.If it bombs, then maybe I will again come back to you :)

> Now strange thing here is that it works in my 
> office FF7.01 version and does not work on my local laptop version. 

"Does not work" is not an error description. 

Kiran: It does not show up image.IMG SRC is replaced correctly for but for some reasons, I get 404 error,this means that the FF which I have in office replaces path correctly and displays 
image correctly and the same thing does not happen in my laptop firefox.So I am trying to understand the reasons for this.

<http://jibbering.com/faq/> 

> So I believe there is something which needs to tweaked to make it works 
> and definitey now a code issue. 

The problem is primarily due to the fact that you have not the slightest 
idea what you are doing but you are not aware of it. 

> 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. 

You cannot work around security restrictions.  You can only lower security 
settings, or you can use the proper API.  The File API has nothing to do 
with HTML5 to begin with. 

<http://www.w3.org/TR/FileAPI/> 

Kiran: yes I can see that almost all google search says that input=file  has some security restrictions,I really dont understand if this is such a huge hole to security, then why was input=file tag was not removed from HTML Specs.

Kiran: Thanks I will check file API and see if this fits my requirement.Does this support older browsers ?

Many thanks Thomas , all your suggestions makes sense.

PointedEars 
-- 
    realism:    HTML 4.01 Strict 
    evangelism: XHTML 1.0 Strict 
    madness:    XHTML 1.1 as application/xhtml+xml 
                                                    -- Bjoern Hoehrmann

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

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