CODEWITHSUNDEEP
phpmysqlajax
devzone
devzone

Reputation: 305

PHP AJAX UPLOAD?

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!";              
            }
    }
?>

Upvotes: 0

Views: 2475

Answers (5)

NeDark
NeDark

Reputation: 1294

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

Upvotes: 1

Kszili
Kszili

Reputation: 334

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

Upvotes: 1

Mark Lalor
Mark Lalor

Reputation: 7887

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);
    };
};
?>

Upvotes: 0

MRW
MRW

Reputation: 209

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.

Upvotes: 0

Pekka
Pekka

Reputation: 449415

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.

Upvotes: 0

Related Questions