Question

First let me say i dont know if this is possible the way im doing it so, i come here to the pros for help.

As the subject points out, What im trying to achieve is, that on button press, the content i want loaded appears in an iframe….

At first, what i did is this:
The iframe html is this:

<iframe id="my-frame" src=""></iframe>

and the simple form code is this:

<form action="#" method="post" target="my-frame">
<input type="file" name="localFile"  id="localFile">
 <input type="submit" id="Sbtn" name="Sbtn" value="submit">
</form>

Which should load what i selected inside the iframe i targeted called “my-frame” but instead, when i press
the button, it loads the currently opened page and i end up with like, one of those funhouse mirror effects that you see the same thing over and over and over inside itself…….or loads nothing at all, the iframe section stays white….

So i gave up and tried a bit of Js and again, not sure if this is the way to go about it but…well i gotta try something. So that said, i took out the “target=”my-frame” from the form part of it, and put in this.

var myFrame = document.getElementById("my-frame");
var btn2 = document.getElementById("Sbtn");
var field2 = document.getElementById("localFile");

btn2.onclick = function(){
        if(field2.value ==""){
            //enter error message or something.
        } else {
          myFrame.src = field2.value;
          return false;

        }
}

Then when i do this, i get errors like “page cannot be found” etc…not matter what i do the page cant be found.

the exact error i get is this:

Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.

to which i dont understand since im navigating to the file(whatever it is) via the wizard that comes up.

Now for further troubleshooting, when i do a regular link …for example(pseudo code)

<a href =" path to local file here " target="the iframe id"></a>

then it loads it in just fine…

so im lost.

Any ideas as to what im doing wrong or…something im missing?

Any tips,links, any help of any kind ill gladly and humbly accept.
thanks in advanced.

Somdow
http://somdowprod.net/

Answer 1

As I understand, what you want is:

• Pick a file with an input type=file
• Click submit
• The selected file should appear inside an iframe (what you expect)

AFAIK, this can be done only with IE. Cause of the security settings for Chrome & FF are different (higher). You can try an alert command to see what really happen whith IE, Chrome & Firefox. Just change your code a bit like this :

...
} else {
  alert(field2.value); ///--- add this line
  myFrame.src = field2.value;
  return false;
}
...

Open your file with all 3 major browsers (IE, Chrome, FF) & see result for each one when you choose file and click the submit button repectively.

---

As I tested, the result for IE was the full path on hard disk to the file :

C:\Documents and Settings\DUNGPRO\My Documents\A WALLPAPER\abc.jpg

While Chrome replace the path with a fakepath:

C:\fakepath\abc.jpg

And firefox just give you the filename only:

abc.jpg

Yes, the fake path or filename only are what make it displayed 404-File not found. Only IE gives you the expected path & that’s why your code works properly with IE.

Hope you don’t feel this is too bad, while almost these settings from Chrome & FF are default and impossible to change whithin your code. Just think they’re for user’s security & find another approach. Good luck.