Forum Moderators: open
I have a form in which I have multiple file input fields on it. The name attributes of the fields are in array form to simply the upload feature in php.
I access the fields via the id attribute in MSIE but have to access the fields via the name attribute in Netscape.
SO for example:
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
changesrc() {
str = document.listor_form.Photofile[0].value;
str = str.replace(':','¦');
str = str.replace('\\','/');
str = str.replace(' ','%20');
document.listor_form.photo1.src = "file:///" +str;
}
</script>
...
...
<form name="listor_form" method="post" ENCTYPE="multipart/form-data">
<img name="photo1" src="default.png"
<input name = "Photofile[0]" type="file">
<input name = "Photofile[1]" type="file">
<input name="preview" type="button" value="Netscape Users Click Here to Preview Images" onClick="changesrc();">
</form>
NS doesn't seem to like the document.listor_form.Photofile[0].value
Also if any one can tell me how to shorten my str.replace code I'd appreciate it.
It really bites that in order for the onchange event for the <input type=file> only works when the focus of the field is lost.
Thanks for all the help.
Sorry.
You can't read or write the value of a file input element.
this is a security issue.
(think about it, if you could write a value to it, the page author could automatically upload any file on the user's computer automatically.)
You need to fix the following:
i.e. the following should work:
<html>
<head>
<title>hello world</title><SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function show_me(form_elem) {
document.pic1.src = "file://localhost/" + form_elem.value;
}
</script>
</head>
<body>
<form method="GET" name="upload_form" action="index.html" target="_top">
<input type="file" name="file_name" size="14" maxlength="256" value="">
<br>
<a class="button" href="javascript:show_me(document.upload_form.file_name);">Submit</a>
</form>
<img name="pic1" src="file://localhost/C:/Dove.gif"/>
</body>
</html>
No security issues I can see. All you are doing is reading the value of the file path which the user himself entered, not uploading anything.
Shawn
ShawnR,
Thanks for the code, didn't work in NN7.X I can get it to work if I iterate through the objects of the page and compare the name property to "Photofile[X]" and retrieve the value when I get a match. I works but really goes against my grain because it is so inefficent. I wouldn't mind changing the Photofile[X] to Photofile_X but I have a considerably amount of code already written in PHP that takes the array of images uploaded and plays around with them. And surely there is a way to crack the proper syntax.
Question about the localhost part of your code. Is localhost working own all PCs? Will someone who comes to my site with WIn 95 or Win 98 or an Apple be able to utilize localhost.? I thought it only worked if you had IIS or a webserver running on your machine.
Also it would be great if anyone could tell me how to consolidate those str.replace operation into one statement. I'd like to know just for my own sake of knowledge.
P.S. I had a very nice script written that works of MSIE, I'm just gettting a larger number of non-MSIE users to the site and I'm having to revamp my code to accommodate them.
Thanks again,
JR
str = document.listor_form['Photofile[0]'].value;
Seems to be proper, so the following works.
I'll play around with
for (k=0;k<2;k++) {
n = 'Photofile['+k+']';
str = document.listor_form[n].value;
str = str.replace(':','¦');
str = str.replace('\\','/');
str = str.replace(' ','%20');
eval ("document.listor_form.photo"+k+".src = \"file:///\" +str; ");
}
I'm going to play around with RegExp to replace the str.replace function....hopefully have time.
Thanks a bunch gang!
I tried it on a Win XP platform with NN4.7, NN7, Opera 6, Opera7, IE6. Seems to work in all except Opera 6.
The code I used is as previous post except:
<input type="file" name="file_name[1]" size="14" maxlength="256" value="">
<br>
<a class="button" href="javascript:show_me(document.upload_form['file_name[1]']);">Submit</a>
(for Opera 6, you need to strip out the quotes, else it tries to load up:
file://localhost/"C:/blah/blah.jpg"
instead of
file://localhost/C:/blah/blah.jpg
)
Not sure about Win 95, Win 98, apple mac, etc, but I don't have MS IIS installed, and I turned off the webserver on my local machine for the tests I did.
>>>"...And surely there is a way to crack the proper syntax..."
As I said, it works OK for me, but it is not proper syntax! The [nn] is used for indexing, so it is illegal to use it as part of the identifier. Have a look at the 'core attributes' section of the w3 html spec.
Sorry, I can't think of a way to substantially improve the str.replace. The escape() function will take care of the conversion of the space to %20. You could try have a play with using a 'transformation' type of regex for the other chars, and then pass the result to escape(), but I'm not sure if you will be able to substantially improve the elegance of it.
Shawn
[added: Oops: Seems I hadn't refreshed my screen, so I hadn't seen your previous post when I posted this one. Anyhow, they seem to be saying similar things...]
I noticed you said N4.7, can I install it on my machine if I'm running NN7.X.
I have Win XP pro as well with Mozilla and IE installed.
Also do you have the different versions Opera installed on one machine?
I'm an old C guy who mainly coded for one platform, this multi platform and multiple plug-in world can be somewhat frustating enviroment to develop for.
Thank again,
JR
Sorry for missing the thrust of what you were trying to do.
Tested out ShawnR's variation and it worked for me. Worked in Mozilla (NN7) also.
<script type="text/javascript">
changesrc() {
str = document.getElementById('photo_0').value;
str = str.replace(':','¦');
str = str.replace('\\','/');
str = str.replace(' ','%20');
document.photo1.src = "file:///" +str;
}
</script>
...
...
<form name="listor_form" method="post" ENCTYPE="multipart/form-data">
<img name="photo1" src="default.png"
<input id="photo_0" name="Photofile[0]" type="file">
<input id="photo_1" name="Photofile[1]" type="file">
<input name="preview" type="button" value="Netscape Users Click Here to Preview Images" onClick="changesrc();">
</form>
