File upload using jquery not working

Question

I'm trying to make a really simple file upload using jQuery, without having to download 3rd party plugin / scripts.

Here is my code:

HTML

  <form enctype="multipart/form-data" action="" method="POST" name="form">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    <?php _e('Choose a file to upload') ?>: <input name="uploadedfile" class="uploadedFile" type="file" />
    <input type="submit" class="button uploadImage" value="<?php _e('Upload File') ?>" />
  </form>

PHP

<?php
  require_once($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php');

  $uploaddir = WP_CONTENT_URL.'/uploads'.$_POST['current_path'];
  $uploaddir = str_replace('/','\\', $uploaddir);
  $uploadfile = $uploaddir .'\\'. basename($_FILES['uploadedfile']['name']);


  echo $uploadfile;
?>

JS

  //File upload
  jQuery('.uploadImage').live('click',function() {

    var current_path = jQuery('#currentPath span').html();
    var new_dir = jQuery(this).find('span').html();

    // Load new content in browser window
    jQuery.ajax({
        type: "POST",
        url: "../wp-content/plugins/wp-filebrowser/uploader.php",
        dataType: 'html',
        data: {current_path: current_path, new_dir: new_dir},

        success: function(data){
                 alert(data);
        },

        error: function(){
          alert('Page load failed.');
        }
    });

  });

The problem is that I can't get info on $_FILES['uploadedfile']['name']. Is this because the form is never submitted?

Are you sure the url in your jquery.ajax is correct ? – Chris Sep 06 '10 at 17:27 — Chris, Sep 06 '10 at 17:27
At which point are you uploading the actual file? – Pekka Sep 06 '10 at 17:30 — Pekka, Sep 06 '10 at 17:30
Pekka: Exactly ;) That's kind of where I'm stuck. – Steven Sep 06 '10 at 20:45 — Steven, Sep 06 '10 at 20:45

score 4 · Accepted Answer · answered Sep 06 '10 at 17:34

4

You can't upload files via ajax. When you do:

data: {current_path: current_path, new_dir: new_dir},

You're just sending the location of the file, not the actual file. The only way to upload a file without a page refresh is to use flash/java/etc, or to submit a form via a hidden iFrame.

I think the jQuery form plugin handles this. Here's another script which will do this.

answered Sep 06 '10 at 17:34

morgancodes

25,055
38
135
187

This is the root of the problem. The jQuery form plugin uses a hidden iframe to get around it – Pekka Sep 06 '10 at 17:54
Yeah, I tried using IFrame, but couldn't get it to work. Will test with your link. Thanks. – Steven Sep 06 '10 at 20:42

score 1 · Answer 2 · answered Sep 06 '10 at 17:39

1

That's correct. You're only passing the file path around as request parameter, not the file content as multipart/form data request body. It won't land in $_FILES. Also, think once again about it, passing alone the path around ain't ever going to work if the webserver and webbrowser runs at physically different machines.

I'd suggest to have a look at jQuery Uploadify plugin, it handles all the nasty details of uploading files with Ajax for you transparently.

answered Sep 06 '10 at 17:39

BalusC

1,082,665
372
3,610
3,555

I'm using Uploadify in another solution, but I don't want to use flash this time. – Steven Sep 06 '10 at 20:43
Then go for the jQuery form plugin. – BalusC Sep 06 '10 at 20:53

score 0 · Answer 3 · answered Sep 06 '10 at 17:28

Make sure to specify proper settings for:

file_uploads
upload_max_filesize
memory_limit
max_execution_time
post_max_size

See:

How to optimize your PHP installation to handle large file uploads

Also make sure that:

Specifying the correct path
Directories have permission, chmod to 755
Data is coming through, check with:

print_r($_FILES);

score 0 · Answer 4 · edited May 23 '17 at 12:26

0

I think you'll need to use a jQuery plugin. Uploadify is good but you'll require:

* jQuery v1.2.x or greater
* SWFObject v2.2 or greater
* Flash Player v9.0.24 or greater

You can get all the info. on uploadify at www.uploadify.com.

This will help you out with some more options.

edited May 23 '17 at 12:26

Community

1
1

answered Sep 06 '10 at 17:56

Sidharth Panwar

4,606
6
27
36

File upload using jquery not working

4 Answers4