0

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?

Improve this question
3
  • Are you sure the url in your jquery.ajax is correct ? Commented Sep 6, 2010 at 17:27
  • At which point are you uploading the actual file? Commented Sep 6, 2010 at 17:30
  • Pekka: Exactly ;) That's kind of where I'm stuck. Commented Sep 6, 2010 at 20:45

4 Answers 4

Reset to default
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.

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

2 Comments

This is the root of the problem. The jQuery form plugin uses a hidden iframe to get around it
Yeah, I tried using IFrame, but couldn't get it to work. Will test with your link. Thanks.
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.

Improve this answer

2 Comments

I'm using Uploadify in another solution, but I don't want to use flash this time.
Then go for the jQuery form plugin.
0

Make sure to specify proper settings for:

  • file_uploads
  • upload_max_filesize
  • memory_limit
  • max_execution_time
  • post_max_size

See:

Also make sure that:

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

print_r($_FILES);

Improve this answer

Comments

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.