File upload using jquery not working

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('/','\\', $upload开发者_Python百科dir);
  $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?

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.

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.

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

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.