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

Could you please fix your question for the codes to become legible? — leafnode
– leafnode, Commented Aug 20, 2010 at 8:33

Kszili · Accepted Answer · 2010-08-23 00:53:16Z

1

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

answered Aug 23, 2010 at 0:53

Kszili

3343 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NeDark · Accepted Answer · 2010-08-23 01:10:40Z

1

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

answered Aug 23, 2010 at 1:10

NeDark

1,3148 gold badges24 silver badges39 bronze badges

Comments

Pekka · Accepted Answer · 2010-08-20 08:27:31Z

0

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.

answered Aug 20, 2010 at 8:27

Pekka

451k150 gold badges990 silver badges1.1k bronze badges

2 Comments

Steve-o Over a year ago

With HTML 5 you can convert an image into a data URL and then post that via AJAX.

Pekka Over a year ago

@Steve-o yes, but not any arbitrary file from the hard disk.

MRW · Accepted Answer · 2010-08-20 09:09:32Z

0

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.

answered Aug 20, 2010 at 9:09

MRW

2091 silver badge6 bronze badges

Comments

Mark Lalor · Accepted Answer · 2010-08-23 00:31:43Z

0

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

edited Aug 23, 2010 at 0:31

answered Aug 21, 2010 at 4:14

Mark Lalor

7,94318 gold badges70 silver badges108 bronze badges

Collectives™ on Stack Overflow

PHP AJAX UPLOAD?

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related