Change Image to File Input Value


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 4 of 4

Thread: Change Image to File Input Value

  1. #1
    Join Date
    Nov 2003
    Posts
    6

    Change Image to File Input Value

    I simply want to change the current image to the value in the file input box.

    Here's what I have

    Code:
    <form name='form1' method='post' enctype='multipart/form-data'>
    
    
    
    
    
    <input type='file' name='image' onChange='document.image1.src="document.form1.image.value">
    
    </form>
    When I select an Image, the image changes but is not found.
    I believe it's because of the backslashes in the path from the file field.

    I hardcoded a path to an image with forward slashes rather than backslashes
    an it worked fine. But the file field returns backslashes.

    Any ideas?

    Thanks
    lee20

  2. #2
    Join Date
    Feb 2004
    Posts
    808

    Re: Change Image to File Input Value

    Originally posted by lee20
    I simply want to change the current image to the value in the file input box.

    Here's what I have

    Code:
    <form name='form1' method='post' enctype='multipart/form-data'>
    
    
    
    
    
    <input type='file' name='image' onChange='document.image1.src="document.form1.image.value">
    
    </form>
    When I select an Image, the image changes but is not found.
    I believe it's because of the backslashes in the path from the file field.

    I hardcoded a path to an image with forward slashes rather than backslashes
    an it worked fine. But the file field returns backslashes.

    Any ideas?

    Thanks
    lee20
    im not sure about java script, but you might try this code snippet:

    Code:
    function replaceChar(base, rid, add) { 
      for (var p = base.indexOf(rid); p > -1; p = base.indexOf(rid)) 
        base = base.substring(0, p) + add + base.substring(p + rid.length); 
      return base; 
    }
    and do a replaceChar(filepath, '\', '/') to change the \ to / in the path....
    The 6th edict:
    "A thing of reference thing can hold either a null thing or a thing to any thing whose thing is assignment compatible with the thing of the thing" - ArchAngel, www.dictionary.com et al.
    JAR tutorial GridBag tutorial Inherited Shapes Inheritance? String.split(); FTP?

  3. #3
    Join Date
    Nov 2003
    Posts
    6
    Ok so i'm not the brightest crayon in the java crayon box.

    I changed my on change to this:

    document.pgraphic.src=this.value

    And it works fine! Now I do have another question though, I have a reset button for the image. And i suppose on click I want to reset it back to the original value. Is that possible?

    Thanks
    lee20

  4. #4
    Join Date
    Feb 2004
    Posts
    808
    youll have to store somewhere the origianl value. again, im no javascript whizz but:

    function reset(){
    document.pgraphic.src=<ORIGINAL VALUE>
    document.theTextField.value = <ORIGINAL VALUE>
    }

    and elsewhere <button onclick=reset()>Reset</button>

    but im NOT sure... just have a play with it
    The 6th edict:
    "A thing of reference thing can hold either a null thing or a thing to any thing whose thing is assignment compatible with the thing of the thing" - ArchAngel, www.dictionary.com et al.
    JAR tutorial GridBag tutorial Inherited Shapes Inheritance? String.split(); FTP?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center