/    Sign up×
Community /Pin to ProfileBookmark

Upload script with Ajax and PHP

I am writing my first Ajax-PHP script. I have succeded to call the php file from the javascript file and then get an echo from the php file. But I also want to upload the file and I don´t know how to complete the code so it also uploads the file to server without reloading the page.
When the file has been uploaded I want the filename to be printet in the div tag called “uploadedFiles” in te upload.html file.

Please, help!

upload.html

[code]
<html>
<head>
<body>
<form id=”uploadForm” name=”uploadForm” enctype=”multipart/form-data” method=”post” onsubmit=”uploadFile();” action=””>
<label>

<input type=”file” name=”upload_file” />
<br />
<br />
<input type=”submit” name=”upload” id=”upload” value=”Upload” />
</label>
</form>

<div id=”uploadedFiles” align=”left”><p id=”val”></p></div>
<html>
<head>
<body>[/code]

upload.js

[code]function uploadFile()
{
var xmlHttp;
try
{
xmlHttp = new XMLHttpRequest();
}
// For older versions than IE6
catch(e)
{
var XmlHttpVersions = new Array(“MSXML2.XMLHTTP.6.0”,
“MSXML2.XMLHTTP.5.0”,
“MSXML2.XMLHTTP.4.0”,
“MSXML2.XMLHTTP.3.0”,
“MSXML2.XMLHTTP”,
“Microsoft.XMLHTTP”);

for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
try
{

xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e)
{
alert(“Something went wrong”);
}
}
}

xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
document.uploadForm.test.value = xmlHttp.responseText;
}
}

xmlHttp.open(“GET”, “upload.php”, true);
xmlHttp.send(null);

}
[/code]

upload.php

[code=php]<?php
$maxsize = 28480;
if( !$_POST[‘upload’] )
$error = “Error: Try again.”;

if(!is_uploaded_file($_FILES[‘upload_file’][‘tmp_name’]) and !isset($error))
{
$error = “A file has to be uploaded.”;
}

if($_FILES[‘upload_file’][‘size’] > $maxsize and !isset($error))
{
$error = “Maximum 20 kB”;
}

if($_FILES[‘upload_file’][‘type’] != “image/gif” and
$_FILES[‘upload_file’][‘type’] != “image/pjpeg” and
$_FILES[‘upload_file’][‘type’] != “image/jpeg”)
{
$error = “It mus be a gif or jpeg file.”;
}

if(!isset($error))
{
$filename = $_FILES[‘upload_file’][‘name’];
move_uploaded_file($_FILES[‘upload_file’][‘tmp_name’], “filer/$filename”);
echo “Thanks for uploading!”;
exit;
}
else
{
echo $error;
}

?>[/code]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@j0n0Oct 01.2008 — if you use a form then it will reload the page.

but if you use an iframe....

put an iframe on your page like so:


<iframe marginwidth=0 marginheight=0 frameborder=0 src=thePHPform.php></iframe>
[/QUOTE]


remove the form from your page and put it in thePHPform.php.

So when the page opens your form will load in the iframe.

Then on the return php page (after submit) put:


<script>

window.parent.document.getElementById("id_of_the_div").innerHTML="whatever php stuff you want"

</script>
[/QUOTE]
Copy linkTweet thisAlerts:
@RoxxorauthorOct 02.2008 — Thanks, but that is not an AJAX solution???
Copy linkTweet thisAlerts:
@j0n0Oct 03.2008 — Its a solution - why does it have to ajax?
Copy linkTweet thisAlerts:
@RoxxorauthorOct 03.2008 — It doesn´t, but I would like to learn Ajax. ?
Copy linkTweet thisAlerts:
@j0n0Oct 04.2008 — me too
×

Success!

Help @Roxxor 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.17,
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,
)...