J
Jonatan
Hi all,
I'm trying to upload files doing something like gmail. I almost got it
but I have a problem when I post the form.
Basicaly, I am doing the following.
When the user presses the link I create a input type="file". Then I
fire the click event of the control and the open file dialog appears.
The user selects a file and then the onpropertychange of the control
calls the funtion "onFileSelected" where I get the file name. Then I
create one control to hold the file name and a delete hyperlink to
delete the controls.
That part work just fine.
My problem comes when the user presses the "upload" button. For some
reason instead of submiting the form it executes de "onFileSelected"
function again, sets the focus in the textbox next to the "Browse"
button and removes the name of the file that the user had already
selected.
If instead of doing that, I remove the line that hids the input file
and the line that fires the click event and force the user to press
the "Browse" button, everything works perfectly. The Upload button
sends the request to the server where I upload the files!
Could somebody tell me the difference between firing the click event
programatically and pressing on the "Browse" button please? Could you
also let me know how to solve it please?
This is my code.
<HTML>
<HEAD>
<script language="javascript">
function anotherFile(lnk) {
if (document.createElement &&
lnk.insertBefore &&
lnk.parentNode) {
var finp = document.createElement('input');
var brk = document.createElement('br');
if (finp && brk) {
finp.type = 'file';
finp.name = 'userfile' + (new Date()).getTime() + Math.floor(100
* Math.random());
finp.onpropertychange = function () {
onFileSelected(this, brk);
return false;
}
finp.style.visibility="hidden";
lnk.parentNode.insertBefore(finp, lnk);
lnk.parentNode.insertBefore(brk, lnk);
finp.click();
}
}
return false;
}
function onRemove(aLink, aFile, aBr, aS){
aLink.removeNode(true);
aFile.removeNode(true);
aBr.removeNode(true);
aS.removeNode(true);
return false;
}
function onFileSelected(finp, brk) {
if (document.createElement &&
finp.insertBefore &&
finp.parentNode) {
var a = document.createElement("a");
var s = document.createElement("span");
if (s && a) {
a.href = "#";
a.onclick = function () {
onRemove(this, finp, brk, s);
return false;
}
var t = document.createTextNode("[Remove]");
if (t) {
a.appendChild(t);
}
var t2 = document.createTextNode(finp.value + " ");
if (t2) {
s.appendChild(t2);
}
finp.parentNode.insertBefore(s, finp);
finp.parentNode.insertBefore(a, finp);
}
}
return false;
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" encType="multipart/form-data"
runat="server">
<table>
<tr>
<td><A id="link2" style="Z-INDEX: 109; WIDTH: 240px; HEIGHT:25px;
BACKGROUND-COLOR: white" href="#" onclick="return
anotherFile(this);">Another Attachment</A>
</td>
</tr>
<tr>
<td><input class="button" type="submit" name="upload" value="Upload
">
</td>
</tr>
</table>
</form>
</body>
</HTML>
Thank you very much in advance
Jonatan
I'm trying to upload files doing something like gmail. I almost got it
but I have a problem when I post the form.
Basicaly, I am doing the following.
When the user presses the link I create a input type="file". Then I
fire the click event of the control and the open file dialog appears.
The user selects a file and then the onpropertychange of the control
calls the funtion "onFileSelected" where I get the file name. Then I
create one control to hold the file name and a delete hyperlink to
delete the controls.
That part work just fine.
My problem comes when the user presses the "upload" button. For some
reason instead of submiting the form it executes de "onFileSelected"
function again, sets the focus in the textbox next to the "Browse"
button and removes the name of the file that the user had already
selected.
If instead of doing that, I remove the line that hids the input file
and the line that fires the click event and force the user to press
the "Browse" button, everything works perfectly. The Upload button
sends the request to the server where I upload the files!
Could somebody tell me the difference between firing the click event
programatically and pressing on the "Browse" button please? Could you
also let me know how to solve it please?
This is my code.
<HTML>
<HEAD>
<script language="javascript">
function anotherFile(lnk) {
if (document.createElement &&
lnk.insertBefore &&
lnk.parentNode) {
var finp = document.createElement('input');
var brk = document.createElement('br');
if (finp && brk) {
finp.type = 'file';
finp.name = 'userfile' + (new Date()).getTime() + Math.floor(100
* Math.random());
finp.onpropertychange = function () {
onFileSelected(this, brk);
return false;
}
finp.style.visibility="hidden";
lnk.parentNode.insertBefore(finp, lnk);
lnk.parentNode.insertBefore(brk, lnk);
finp.click();
}
}
return false;
}
function onRemove(aLink, aFile, aBr, aS){
aLink.removeNode(true);
aFile.removeNode(true);
aBr.removeNode(true);
aS.removeNode(true);
return false;
}
function onFileSelected(finp, brk) {
if (document.createElement &&
finp.insertBefore &&
finp.parentNode) {
var a = document.createElement("a");
var s = document.createElement("span");
if (s && a) {
a.href = "#";
a.onclick = function () {
onRemove(this, finp, brk, s);
return false;
}
var t = document.createTextNode("[Remove]");
if (t) {
a.appendChild(t);
}
var t2 = document.createTextNode(finp.value + " ");
if (t2) {
s.appendChild(t2);
}
finp.parentNode.insertBefore(s, finp);
finp.parentNode.insertBefore(a, finp);
}
}
return false;
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" encType="multipart/form-data"
runat="server">
<table>
<tr>
<td><A id="link2" style="Z-INDEX: 109; WIDTH: 240px; HEIGHT:25px;
BACKGROUND-COLOR: white" href="#" onclick="return
anotherFile(this);">Another Attachment</A>
</td>
</tr>
<tr>
<td><input class="button" type="submit" name="upload" value="Upload
">
</td>
</tr>
</table>
</form>
</body>
</HTML>
Thank you very much in advance
Jonatan
