SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Zealot dizyn's Avatar
    Join Date
    Apr 2006
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF impage preview script problem

    Here is my script to preview an image when its been selected on a webpage it works fine for the IE but don't work for FF.

    Code:

    Code:
    <HTML>
    <HEAD>
      <TITLE>Visual Dice Demo</TITLE>
    <script language="javascript">
    var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i;
    function previewImage(pathField, previewName)
    {
    	var path = pathField.value;
    	if (path.search(imgRe) != -1)
    	{
    		document.getElementById("ee").innerHTML = "<img src="+path+" width=\"100\" height=\"100\">";
    	}
    	else
    	{
    		alert("JPG, PNG, and GIFs only!");
    	}
    }
    </script>
    </HEAD>
    </BODY>
    <form name="imageTest">
    <input type="file" name="myImage" size="30" onChange="previewImage(document.imageTest.myImage,'replaceMe')"/>
    
    
    </form> 
    <div id="ee">
    </div>
    </HTML>
    Please have a look on code and suggest.

    thank you
    dizyn

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to put

    Code:
    file:///
    in front of the url, ie:

    Code:
    <HTML>
    <HEAD>
      <TITLE>Visual Dice Demo</TITLE>
    <script language="javascript">
    var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i;
    function previewImage(pathField, previewName)
    {
        var path = pathField.value;
        if (path.search(imgRe) != -1)
        {
            var img = document.createElement('IMG');
            if(navigator.userAgent.indexOf('MSIE') > -1)
                img.src = path;
            else
                img.src = 'file:///' + path;
                document.getElementById("ee").innerHTML = '';
                document.getElementById("ee").appendChild(img);
        }
        else
        {
            alert("JPG, PNG, and GIFs only!");
        }
    }
    </script>
    </HEAD>
    </BODY>
    <form name="imageTest">
    <input type="file" name="myImage" size="30" onChange="previewImage(document.imageTest.myImage,'replaceMe')"/>
    
    
    </form> 
    <div id="ee">
    </div>
    </HTML>


  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    you need to put

    Code:
    file:///
    in front of the url,
    While that will work locally, for security reasons the path is not made available to online sites, only the file name itself.
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ? Only the filename is passed via post. At this point, the form is not being submited.


  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    ? Only the filename is passed via post. At this point, the form is not being submited.
    I'm not referring to submitted data. I know that Opera for one does not allow the path to be read from a file type input, only the file name.
    Tab-indentation is a crime against humanity.

  6. #6
    SitePoint Zealot dizyn's Avatar
    Join Date
    Apr 2006
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in my code i gave file size so if the very big file is selected it don't show on all the page but it's size get down to 100 pixels.

    Code Java:
    document.getElementById("ee").innerHTML = "<img src=\"file:///"+path+"\" width=\"100\" height=\"100\">";


    how can i do that in this new code. Its ok if it does not work in opera as long as it works fine in IE and FF.

    thanks everyone for the help.

    dizyn

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use the code I provided, and set a width/height. Or at least set some css for the element. Not sure why you want to use the innerHTML.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •