Member Avatar for sree22_happy

hi friends

i have a problem in previewing image in mozilla browser.I will give the code.

script code
<script type="text/javascript">
        
      function loading(img)
      {
document.getElementById('disp').src=img;
      }
</script>
jsp page code 
<html:file  property="productImage"  value="${product.productImage}" styleClass="sni_input" onchange="loading(this.value)"/>

 <img src="" id="disp">

only few codes are written.I think you can understand this.
This will work in IE.When i click the browse button and selected a particular image it will be shown below to that browse button.But in Mozilla it wont showing .. please help me
thanks in advance

  • 2 Contributors
  • 2 Replies
  • 223 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by sree22_happy
Member Avatar for ~s.o.s~

This is because the value which you receive in the upload box is a Windows specific path. IE would obviously know how to interpret it but Mozilla won't.

To make this possible, you have to convert your windows path into a file resource which can be used by all browsers using the file protocol. Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Expires" content="0" /> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function getData(srci) {
        srci = srci.replace(/\\/g, "/");    /* convert all \ to / */
        encodeURI(srci);    /* encode the URI to enable escaping */
        srci = "file://" + srci;
        alert("File resource at : " + srci);
        document.images[0].src = srci;  
    }
    </script>
</head>
<body>
    <form action="#">
        <input type="file" onchange="getData(this.value);">
        <br><br>
        <image src="#" alt="image">
    </form>
</body>
</html>

Keep in mind that there is no such thign mentioned in the specification which says that the path to the local resource can be successfully retrieved from the file select control and hence even the above trick might not work in some browsers like Opera.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.