• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Display jpeg file in jsp page

 
Ranch Hand
Posts: 48
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have a file browse button in my jsp,

-I am supposed to click on the browse button
-Select a file, the file is a picture (jpeg file)
-I want it to be displayed in the page, as soon as I select it.

Any clue, how to do this ?

Thanks.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You can't without making a round trip to the server to upload the file. You cannot read it directly on the client system and display it on the page.

You will need to submit the multi-part form back to the server, write the file to the file system (or db if that's the way you want to go), and return a page (can be the same page) with an image tag that references the newly uploaded image.
[ April 21, 2005: Message edited by: Bear Bibeault ]
 
Ranch Hand
Posts: 256
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
i think if the image file is on the client itself then you can use divs or layers depending on the browser to open these images.
you can use javascript to open the images ie:- put a
in a div and open it in your page.
just a speculation. try it out.
[ April 21, 2005: Message edited by: Niki Nono ]
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

i think if the image file is on the client itself then you can use divs or layers depending on the browser to open these images.



Umm, sorry. No, you can't.

You would need to know the precise file path to the image and construct a local file-URL to that image. And since Javascript is incapable of inspecting the client file system how would you propose to construct that URL?
 
Ranch Hand
Posts: 44
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Bear Bibeault:


Umm, sorry. No, you can't.

You would need to know the precise file path to the image and construct a local file-URL to that image. And since Javascript is incapable of inspecting the client file system how would you propose to construct that URL?



Hi,
I have tried to do it in JavaScript itself.It works !!! .Hence there is no need to make a trip to the server.You can verify it with this code.

test.jsp

<%@ page language="Java"%>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript">
function fn()
{
var obj = document.getElementById("testFile");
if(obj.value=="")
{
alert("Please browse for an image to be displayed");
return;
}
var fileValue = obj.value;
var objImage = document.getElementById("testImage");
objImage.src = fileValue;
}
</script>
</HEAD>
This is a test
<BODY>
<input type="file" name="testFile" onChange = "javascript:fn()"/></input>
<img src="" name="testImage" alt="Image Area"/>
</BODY>
</HTML>
 
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Amba Joshi:
I have a file browse button in my jsp,

-I am supposed to click on the browse button
-Select a file, the file is a picture (jpeg file)
-I want it to be displayed in the page, as soon as I select it.

Any clue, how to do this ?

Thanks.



Do you only want the user to be able to see pictures on their own machine?
Or did you want them to go to the server so everyone can see them?

BTW: I was able to get kumari's code to work in Mozilla with a few tweaks.
I wouldn't have expected to be able to read the value of an input field who's type is "file" from javascript. I know that (for obvious security reasont) you can't set the value. I would have figured that reading it would be dissallowed too.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hmmm, according to most references, it isn't allowed. And I couldn't get it to work. Strange and bears further investigation!
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Bear Bibeault:
Hmmm, according to most references, it isn't allowed. And I couldn't get it to work. Strange and bears further investigation!



Probably because you weren't using a browser that tries to think for you.
I got it to work in Mozilla on an FC2 box by adding IDs to the elements so that getElementById would work and by prepending the protocol ("file:") to that path so that it wouldn't be seen as a relative link in a *nix system.
I'm curious to know if this works in Safari (I would applaud them if it didn't):
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is getting intriguing! Ben, which version of Moz and platform did you get this to work with?

I've tried it on a number of different browsers on Windows and Mac and the only configuration I was able to get it to work under was WinXP/IE6.

Using either Mozilla 1.7 or Firefox 1.0.2 on WinXP I received a Javascript error:

Security Error: Content at http://bear-xpp:8080/testbed/f.html may not load or link to file:///D:%5Cbear%5CPhotos%5CVStar1100Silverado.jpg.



On the Mac, Mozilla 1.6 didn't display any error, but aborted the function at the same point. Safari threw a security exception. And interestingly enough, Mac IE (it's been a while since I've fired that relic up!) also did not allow it.

So this seems like a security hole specific to Windows IE, and perhaps whatever configuration of Mozilla Ben got it work under.
[ April 22, 2005: Message edited by: Bear Bibeault ]
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Mozilla 1.7.6 (It's the one that ships with FC2 + any up2date upgrades).

When I get a chance, I'll see if I can set the value.
[ April 22, 2005: Message edited by: Ben Souther ]
 
Niki Nono
Ranch Hand
Posts: 256
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
guys it also works fine with IE 6.0
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

it also works fine with IE 6.0



Yes, that's what I said.

Also I'm not sure that "works fine" is a good way to describe depending upon buggy behavior.
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm glad to say, you can't set the value with Javascript.


I guess there is no harm in being able to read the value.
MSIE sends the whole path with the filename anyway.
Choosing the file is something that the user has to do manually so it wouldn't be possible to use this to go snooping around someone's machine.

[ April 22, 2005: Message edited by: Ben Souther ]
[ April 22, 2005: Message edited by: Bear Bibeault ]
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
According to what I read (I'm trying to find it again -- I looked it up from home this morning, pre-caffeine, so no bets) it's not necessarily the reading that's the violation, but the local referencing. In any case, since the "feature" depends upon a fluke (or bug or flaw or however you want to categorize it) that is inconsistent across browsers and platforms (and subject to removal/fixing in future versions), it's certainly not behavior I'd use in my app.
 
Ambika Jain
Ranch Hand
Posts: 48
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This code works well in Firefox1.0.3


thanks,
Amba
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You did read all the posts in this thread, didn't you?
It doens't work in half the browser/OS combinations tried
AND it doesn't work because the technique used is specifically forbidden for security reasons.

Are you really going to put this in your app, knowing that?
[ April 22, 2005: Message edited by: Ben Souther ]
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

This code works well in Firefox1.0.3



Fascinating! Which platform? I just downloaded Firefox 1.0.3 on my WinXP/SP2 box and I get the same security exception:

Security Error: Content at http://bear-xpp:8080/testbed/f.html may not load or link to file:///D:%5Cbear%5CPhotos%5CVStar1100Silverado.jpg.



So not only is the behavior inconsistent among browsers, it's inconsistent on installations of the same browser and version.

Not something I'd bet the farm on!

So I'll rephrase my original assertion as: there is no reliable and consistent way to do this without a round trip to the server to upload the file.
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Bear Bibeault:


So not only is the behavior inconsistent among browsers, it's inconsistent on installations of the same browser and version.

Not something I'd bet the farm on!

So I'll rephrase my original assertion as: there is no reliable and consistent way to do this without a round trip to the server to upload the file.



Are you using the default security settings with FF or did you latch them down a bit?
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I wonder if we'd get more input on the subject if this was in the JS/HTML forum. This conversation may have already been had.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Are you using the default security settings with FF or did you latch them down a bit?



Fresh installation with default settings.

I wonder if we'd get more input on the subject if this was in the JS/HTML forum.



Good point. I didn't do so originally as the solid solution relies on server-side technology. But as it has become a discussiuon regarding browser security issues, I'll move it along that way now.
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic