/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] AJAX file & image upload

I have a conundrum of sorts, I want to have a dual purpose form, the form is only ever going to be on my computer so none of the usual security needs will be present, so I found a AJAX script on the W3C site and I modified a little.

[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<script>

function upload() {
var client = new XMLHttpRequest();
var file = document.getElementById(“contentSelect”);
/* Create a FormData instance */
var formData = new FormData();
/* Add the file */
formData.append(“upload”, file.files[0]);
client.open(“post”, “upload.php”, true);
client.setRequestHeader(“Content-Type”, “multipart/form-data”);
/* Check the response status */
client.onreadystatechange = function(){
if(client.readyState == 4 && client.status == 200)
alert(client.statusText + ” ” + client.responseText);
}
client.send(formData); /* Send to server */

}
</script>

</head>

<body>
<form name=”uploadfile” action=”javascript:;” method=”POST” enctype=”multipart/form-data” onsubmit=”return false;”>
<input type=”hidden” name=”POST_MAX_SIZE” value=”99999999″ />
<input type=”file” id=”contentSelect” name=”contentSelect” />
<input type=”submit” name=”submit” value=”Submit” onclick=”upload()”/>
</form>
</body>
</html>[/code]

The form itself reports back that everything is OK, the file was not showing in the directory for the upload so I made the PHP script return the upload name but instead of getting the filename back, I get an error message.

This message reads…

[CODE]OK<br />
<b>Warning<b />: Missing boundary in multipart/form-data POST data in <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>

<title>Upload error</title>
</head>
<body>
<div id=”Upload”>
<h1>Upload failure</h1>
<p>An error has occured:
<span class=”red”> the upload form is needed</span>
The upload form is reloading</p>
</div>
</html>[/CODE]

Well the upload form is being used and the upload form without the feed back is giving a thumbs up.

The upload script is PHP a stripped down version of the image upload script in the forum sticky post.

[code=php]// first let’s set some variables

// make a note of the current working directory, relative to root.
$directory_self = str_replace(basename($_SERVER[‘PHP_SELF’]), ”, $_SERVER[‘PHP_SELF’]);

// make a note of the directory that will recieve the uploaded file
$uploadsDirectory = $_SERVER[‘DOCUMENT_ROOT’] . $directory_self . ‘media/’;

// fieldname used within the file <input> of the HTML form
$fieldname = “contentSelect”;
$uploadForm = “AVLan”;
// possible PHP upload errors
$errors = array(1 => ‘php.ini max file size exceeded’, 2 => ‘html form max file size exceeded’, 3 => ‘file upload was only partial’, 4 => ‘no file was attached’, 5 => ‘mime type not supported’);

// check the upload form was actually submitted else print the form
isset($_POST[‘submit’]) or error(‘the upload form is needed’, $uploadForm);

// mime check
$allowedMime = array(‘image/jpg’, ‘image/jpeg’, ‘image/png’, ‘image/gif’, ‘audio/mpeg’, ‘audio/mp4’, ‘audio/wav’, ‘audio/ogg’);
(!in_array($_FILES[‘uploadedFile’][‘type’], $allowedMime)) or error($errors[5], $uploadForm);

// check for PHP’s built-in uploading errors
($_FILES[$fieldname][‘error’] == 0)
or error($errors[$_FILES[$fieldname][‘error’]], $uploadForm);

// check that the file we are working on really was the subject of an HTTP upload
@is_uploaded_file($_FILES[$fieldname][‘tmp_name’])
or error(‘not an HTTP upload’, $uploadForm);

// If its an image, test it to get the image size.
if(in_array(array($_FILES[‘uploadedFile’][‘type’],array(‘image/jpg’, ‘image/jpeg’, ‘image/png’, ‘image/gif’)))) @getimagesize($_FILES[$fieldname][‘tmp_name’]) or error(‘only image uploads are allowed’, $uploadForm);

$uploadFilename = $_FILES[$fieldname][‘name’];
// now let’s move the file to its final location and allocate the new filename to it
@move_uploaded_file($_FILES[$fieldname][‘tmp_name’], $uploadFilename)
or error(‘receiving directory insuffiecient permission’, $uploadForm);

//echo $uploadFilename; <– this is what I put in to echo back some information, its commented out at present
// The following function is an error handler which is used
// to output an HTML error page if the file upload fails
function error($error, $location, $seconds = 5)
{
header(“Refresh: $seconds; URL=”$location””);
echo ‘<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”‘.”n”.
‘”http://www.w3.org/TR/html4/strict.dtd”>’.”nn”.
‘<html lang=”en”>’.”n”.
‘ <head>’.”n”.
‘ <meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>’.”nn”.
‘ <link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>’.”nn”.
‘ <title>Upload error</title>’.”nn”.
‘ </head>’.”nn”.
‘ <body>’.”nn”.
‘ <div id=”Upload”>’.”nn”.
‘ <h1>Upload failure</h1>’.”nn”.
‘ <p>An error has occured: ‘.”nn”.
‘ <span class=”red”>’ . $error . ‘…</span>’.”nn”.
‘ The upload form is reloading</p>’.”nn”.
‘ </div>’.”nn”.
‘</html>’;
exit;
} // end error handler[/code]

Any ideas on how I cure this because when the script is used in the conventional way, the upload page submits to an upload.php script I get no problems and the file uploads and appears in the intended directory.

I really don’t see why a multipart/form-data conventional form will upload where as an AJAX based form using the same multipart/form-data would produce the error.

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@PadonakOct 30.2013 — did you try to link jquery and use jquery $.post instead of it?
Copy linkTweet thisAlerts:
@rootauthorOct 30.2013 — No JQuery, this has to be in JavaScript (Being a bit of a purist on that point) and the development is on my local LAN which has no internet access point, so JQuery is really out the question on both counts.
Copy linkTweet thisAlerts:
@rootauthorOct 31.2013 — Solved with the help of MDN

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

After a bit of fudging around with the demo script, I got an AJAX uploading page that allows me to upload an audio file or an image ?

I really can't be buggered to decipher how they did it, so I have just used their demo script and modded it to my needs.
×

Success!

Help @root 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 6.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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...