/    Sign up×
Community /Pin to ProfileBookmark

file upload using plain javascript but variables are undefine in PHP

hi,the codes below were just a short version of the actual script..anyway i am uploading a file, as much as possible, using plain javascript but encounterred a hitch when values won’t reach to PHP file . Here are my codes..

[code=html]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Uploading File</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<script type=”text/javascript”>
<!–

function start() {

myForm=document.createElement(“form”);
myForm.action=”uploader.php”;
myForm.method=”post”;
myForm.enctype=”multipart/form-data”;
document.body.appendChild(myForm);

hidden1=document.createElement(“input”);
hidden1.type=”hidden”;
hidden1.name= “MAX_FILE_SIZE”;
hidden1.value= 2000000;
myForm.appendChild(hidden1);

//for the browse button
button1 = document.createElement(“input”);
button1.type=”file”;
button1.name=”upload”;
button1.value=””;
button1.style.position=”absolute”;
button1.style.top = 20;
button1.style.height = 30;
myForm.appendChild(button1);

//for submit button
button2 = document.createElement(“input”);
button2.type=”submit”;
button2.value=”Submit”;
button2.style.position=”absolute”;
button2.style.top = 20;
button2.style.left = 250;
button2.style.height = 30;
button2.style.width = 80;
button2.onclick=”form.submit()”;
myForm.appendChild(button2);

hidden2=document.createElement(“input”);
hidden2.type=”hidden”;
hidden2.name=”submitted”;
hidden2.value=”TRUE”;
myForm.appendChild(hidden2);

} // end of function start().

// –>
</script>
</head>
<body onLoad=”start()”>
</body>
</html>
[/code]

and the PHP file or handler (uploader.php)

[code=php]
echo ‘<pre>POST: ‘; print_r($_POST); echo “</pre>n”;
echo ‘<pre>FILES: ‘; print_r($_FILES); echo “</pre>n”;
echo “<hr />n”;
die();
//this is just a trap to check wether superglobal variable $_FILES do contains
//values…beyond this point are PHP codes that actually do the uploading..
[/code]

unfortunately, the result was..

[code]
POST: Array
(
[MAX_FILE_SIZE] => 2000000
[upload] => D:My FolderTempbytes conversion table.xls
[submitted] => TRUE
)

FILES: Array
(
)
[/code]

i guessed my javacript code just lack something?..

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@_Aerospace_Eng_Dec 19.2006 — I just tested what you posted on my test server and it works fine. I do have a question though. Why on earth would you use javascript to create a form?
Copy linkTweet thisAlerts:
@joboyauthorDec 19.2006 — i am so glad to hear that from you, so what are the codes or statement you add to make it work? by the way, it is a work requirement for me to use "plain" javascript. and i hope it make sense to you.
Copy linkTweet thisAlerts:
@_Aerospace_Eng_Dec 19.2006 — I didn't change anything. I used the exact codes you posted. The file array gets echoed correctly. Here check it out on my test server.

http://pr2006.freehostia.com/test.php
Copy linkTweet thisAlerts:
@joboyauthorDec 19.2006 — thanks for the link..but i think the variable $_FILES has still no values (in my case..). i made a plain HTML codes in lieu to "plain" javascript to show the difference between the two..

[code=html]
<html>
<head>
<title>Uploading File - HTML</title>
</head>
<body>
<form enctype="multipart/form-data" action="uploader.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288">
<p><b>File:</b> <input type="file" name="upload" /></p>
<input type="submit" name="submit" value="Submit" />
<input type="hidden" name="submitted" value="TRUE" />
</form>
</body>
[/code]


please run this code..and you'll get this display.

<i>
</i>POST: Array
(
[MAX_FILE_SIZE] =&gt; 524288
[submit] =&gt; Submit
[submitted] =&gt; TRUE
)

FILES: Array
(
[upload] =&gt; Array
(
[name] =&gt; bytes conversion table.xls
[type] =&gt; application/vnd.ms-excel
[tmp_name] =&gt; H:Tempphp75.tmp
[error] =&gt; 0
[size] =&gt; 13824
)
)


this is the result i want to achieve using the "plain" javascript code. pls. refer to previous result for comparison.
Copy linkTweet thisAlerts:
@_Aerospace_Eng_Dec 19.2006 — Then its an issue with your server because I've tested on two servers and both worked fine.
Copy linkTweet thisAlerts:
@joboyauthorDec 19.2006 — that is a nice lead.. can you expound a bit more on server issue?..what particular setting i need to change..my web server is Apache 2.x, OS - Windows Server 2003, PHP version 5.1.4.
Copy linkTweet thisAlerts:
@joboyauthorJan 10.2007 — _Aerospace_Eng_:

i just want to tell u that your code actually works, maybe my PC at that time was experiencing something weird. i modified some part and here it is. so, hopefully, others may benefit from it.

[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Uploading File</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--

var myForm;
var button;
var stop=false;

function submit() {
if (false)
window.setTimeout(submit, 500);
else
myForm.submit();
}

function start() {


myForm=document.createElement("form");
myForm.action="uploader.php";
myForm.method="post";
myForm.encoding="multipart/form-data";
myForm.enctype="multipart/form-data";
document.body.appendChild(myForm);

upload2=document.createElement("input");
upload2.type="file";
upload2.name="upload2";
myForm.appendChild(upload2);

button=document.createElement("input");
button.type="submit";
myForm.appendChild(button);


} // end of function start().

// -->
</script>
</head>
<body onLoad="start()">
<p>This page is for uploading of file.</p>

</body>
</html>

[/code]


you will notice that this line was missing in my previous codes...

[code=html]
myForm.encoding="multipart/form-data";
[/code]


the php handler...

[code=php]
<?php
echo "<pre>POST: "; print_r($_POST); echo "</pre>n";
echo "<pre>FILES: "; print_r($_FILES); echo "</pre>n";
echo "<hr />n";
?>

[/code]


now gives me the desired result...

<i>
</i>POST: Array
(
)

FILES: Array
(
[upload2] =&gt; Array
(
[name] =&gt; bytes conversion table.xls
[type] =&gt; application/vnd.ms-excel
[tmp_name] =&gt; H:Tempphp5C.tmp
[error] =&gt; 0
[size] =&gt; 13824
)

)



by the way, thanks for the replies you made.
×

Success!

Help @joboy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...