Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Location
    St. John's Newfoundland
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Preview Image Before Uploading

    I have no problem uploading images to a file or into a database but I am having a heck of a time trying to view the image on the client side before uploading.

    I have tried everything I am use to doing and I have searched for other answers, and copied a lot of other examples for changing the scr of an image to the file selected by the user but nothing is working.

    I am testing with Firefox and IE 7 and here is some code below.

    Any answers to help solve this would be greatly appreciated.

    <SCRIPT LANGUAGE = "JavaScript">
    <!--
    var timerID = null;
    var delay = 500;

    function swap(filename){
    clearTimeout(timerID);

    filename = filename.replace(/\\/g,'/');
    document.images["image1"].src = "file:///" + filename;
    //document.images["image1"].src = filename;
    alert("Image Src - " + document.images["image1"].src);
    }

    function StartTimer(){
    if (document.form1.file1.value > ""){
    //alert("Start Swap");
    swap(document.form1.file1.value);
    }else{
    timerID = self.setTimeout('StartTimer()', delay);
    }
    }
    //-->
    </SCRIPT>

    <form name="form1">
    <p><input type="file" name="file1" size="20" onchange="StartTimer()"></p>
    <img border="0" name="image1" id="image1" src="images/no_display_pic.jpg" width="200" height="150">
    </form>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I notice one error:-

    Replace:- if (document.form1.file1.value > ""){

    by
    if (document.form1.file1.value !="") {
    or
    if (document.form1.file1.value.length > 0) {

    There may be other problems as well.
    Last edited by Philip M; 06-09-2007 at 09:29 PM.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    if (document.form1.file1.value > "")
    That is correct, though looks unusual. Try executing this in the address bar to see. This will return true because "test" > "".
    Code:
    javascript:alert(("test">""))
    I think the problem here is, if I remember it right, Firefox doesn't trigger onchange in input file. Try changing it to onclick. And also the problem might be due to browsers not allowing to use different protocols. I think some browsers don't allow setting image src using file protocol if the page is using http protocol.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    New to the CF scene
    Join Date
    Jun 2007
    Location
    St. John's Newfoundland
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for replying,

    All the code seems good, I am getting into the swap() function and I have tested a few things just to make sure I could alter the image width and height and things like that but just the src will not change.

    I have tried both:
    if (document.form1.file1.value.length > 0)
    and
    if (document.form1.file1.value > "")
    both work fine.

    I sure it has something to do with the "file:///" or the way that I apply the src to the image. I have done this a few years ago but i just cant recall how.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Is there any error message? Actually, there's really nothing wrong with your code. But try it in IE6 and I think it will work. I believe this has something to do with security restrictions of linking file:// URL in a page in IE7 and Firefox. This link will give you an idea.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    New to the CF scene
    Join Date
    Jun 2007
    Location
    St. John's Newfoundland
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, no errors, just completes but the image on the page stays the same.

    Different ways that i had it setup (there have been so many different ways now), but anyway, different ways i would right click the image to check the picture properties and even thou the picture didn't change the properties would say src was pointing to or equal to the image file that i sellected client side.

    Any other ideas of how to go about this would be greatly appreciated.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Did you read the link I posted above? It says Firefox (and probably IE7 too) blocks links to local files for security purposes.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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