dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] AJAX file & image upload

  1. #1
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,591

    resolved [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.

    HTML Code:
    <!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>
    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>
    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.
    PHP Code:
    // 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(=> 'php.ini max file size exceeded'=> 'html form max file size exceeded'=> 'file upload was only partial'=> 'no file was attached'=> '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">'."\n\n".
        
    '<html lang="en">'."\n".
        
    '    <head>'."\n".
        
    '        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">'."\n\n".
        
    '        <link rel="stylesheet" type="text/css" href="stylesheet.css">'."\n\n".
        
    '    <title>Upload error</title>'."\n\n".
        
    '    </head>'."\n\n".
        
    '    <body>'."\n\n".
        
    '    <div id="Upload">'."\n\n".
        
    '        <h1>Upload failure</h1>'."\n\n".
        
    '        <p>An error has occured: '."\n\n".
        
    '        <span class="red">' $error '...</span>'."\n\n".
        
    '         The upload form is reloading</p>'."\n\n".
        
    '     </div>'."\n\n".
        
    '</html>';
        exit;
    // end error handler 
    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.
    Last edited by \\.\; 10-30-2013 at 09:08 AM.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,686
    did you try to link jquery and use jquery $.post instead of it?

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,591
    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.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,591
    Solved with the help of MDN

    https://developer.mozilla.org/en-US/...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.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles