aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Display jpeg file in jsp page Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Display jpeg file in jsp page" Watch "Display jpeg file in jsp page" New topic
Author

Display jpeg file in jsp page

Ambika Jain
Ranch Hand

Joined: Jan 27, 2005
Posts: 48
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.


Ambika Jain
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61064
    
  66

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 ]

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Niki Nono
Ranch Hand

Joined: Mar 20, 2005
Posts: 256
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 ]

Life called,so here I am.<br />Cheers<br />Niki.:-)
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61064
    
  66

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?
kumari Jain
Ranch Hand

Joined: Jul 28, 2004
Posts: 44
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>
Ben Souther
Sheriff

Joined: Dec 11, 2004
Posts: 13410

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.


Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61064
    
  66

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

Joined: Dec 11, 2004
Posts: 13410

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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61064
    
  66

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:



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

Joined: Dec 11, 2004
Posts: 13410

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

Joined: Mar 20, 2005
Posts: 256
guys it also works fine with IE 6.0
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61064
    
  66

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

Joined: Dec 11, 2004
Posts: 13410

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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61064
    
  66

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

Joined: Jan 27, 2005
Posts: 48
This code works well in Firefox1.0.3


thanks,
Amba
Ben Souther
Sheriff

Joined: Dec 11, 2004
Posts: 13410

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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61064
    
  66

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:



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

Joined: Dec 11, 2004
Posts: 13410

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

Joined: Dec 11, 2004
Posts: 13410

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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61064
    
  66

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.
 
 
subject: Display jpeg file in jsp page