PHP AJAX UPLOAD ?

Question

I am having problem uplaoding file, here are my codes: Any help? Thanks!

test.html

function insertPhoto()
{
    var description = document.getElementById('description').value;
    var image = document.getElementById('photo').value;
        var url = "ajax_insert.php?action=add&image="+image+"&description="+description;
    var ajaxRequest = ajax_obj();

            ajaxRequest.onreadystatechange = function() {
                        if(ajaxRequest.readyState == 4){

                document.getElementById("msgbox").innerHTML=ajaxRequest.responseText;

            }             
        }

        ajaxRequest.open("GET", url, true);
            ajaxRequest.send(null);

        return false;
}

<div align="center">
  <div class="top" >
    <div>
       Decription <input name="description" type="text" id="description" value="" maxlength="20" />
    </div>
    <div style="margin-top:5px" >
 Image
        <input name="photo" type="file" id="photo" value="" maxlength="20" />
    </div>
    <div class="buttondiv">
        <input name="button" type="button" value="Upload" onclick="return insertPhoto()" style="margin-left:-10px; height:23px"  /> 
        <span id="msgbox" style="display:none"></span>
    </div>
  </div>
</div>

ajax_insert.php

<?php
    mysql_connect('localhost','root','');
    mysql_select_db('priceless');
    define('DIR_IMAGE','images/');

    $image = $_GET['image'];
    $description = $_GET['description'];
    $dbtable = 'photos';
    $action = $_GET['action'];

    if($action == 'add'){
           $photo = '';
                if ($_FILES[$image]['name']) {
                    $aray = explode(".",$_FILES[$image]['name']);
                    $ext = $aray[count($aray)-1];
                    $photo = date('Ymdhis').'.'.$ext;
                    move_uploaded_file($_FILES[$image]['tmp_name'],DIR_IMAGE.$photo);
                } 

               $data = array(
              'image'=> $photo,
              'description'=> $description
               );
                $values = array();
                foreach($data as $show){
                    $values[] = $show;
                }        
              $query = "INSERT INTO ".$dbtable." (`".implode("`,`",array_keys($data))."`) values ('".implode("','",array_values($values))."')";
              if ($result= mysql_query($query) or die(mysql_error())) {        
                 echo "You have Sucessfully Upload Photo!";              
            }
    }
?>

Answer 1

You can't upload files using pure AJAX, because you can't access the file's contents programmatically.

You would have to use a different technique, e.g. submitting the form the normal way into a hidden iframe element. That's the way the jQuery form plugin does it.

Answer 2

If you want some AJAXy upload, look at Uploadify - http://www.uploadify.com/

It can handle multiple uploads at once, and has a real time progress bar. It then has JS parameters to allow you to handle the upload etc.

If you need a full tutorial give me a shout and I will show you some examples!

Hope this helps.

Answer 3

Because of security issues, many browsers do not let you pass data from a file select field through javascript/ajax. It is better to use a page that calls itself, with a normal submit button. (I've tried AJAX uploads on my own website, so believe me).

Try -

<?php
if ($_FILE['file'] != ''){
 $dest = 'folder/';
    list($name, $ext) = explode('.', $_FILES['file']['name']);

    if(is_uploaded_file($_FILES['file']['tmp_name'])){
    @move_uploaded_file($_FILES['file']['tmp_name'], $dest.$name.'.'.$ext);
    };
};
?>

Answer 4

Personally I use this Ajax upload http://valums.com/ajax-upload/ and I'm satisfied with results.

Answer 5

You can't upload files using pure AJAX, because you can't access the file's contents programmatically due to security issues.

You can use an iframe and specify it as the target of the upload form.

You can see an example of it here: http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html