Using jQuery to send data from a multipart/form-data through ajax

Question

I've been working on this all day now, and I just can't get it working.

I have basically got a simple ajax request using the jQuery library and I want to send the data which I post through a mutlipart/form-data file input, however, I have tried everything I can think of.

My File upload script is in place awaiting the file name as a parameter (tried without also), but it just doesn't want to get the data from the file input box itself.

Could someone please enlighten me on how to do this without another plugin (multiple upload, etc).

Here is my jQuery Code for this bit:

function uploadTimesheets(){

$('#waiting').show();

var error = '';

var msg = '';

//Performs the Ajax Request
 var data = $.ajax({
    type        :   'POST',
    url         :   '/ajax/timesheet/uploadNewTimesheets.php',
    dataType    :   'json',
    contentType :   'multipart/form-data',
    data        :   data,
    error       :   error,
    msg         :   msg,
    success     :   function(data){

        if(!data){
            $('#notification').removeClass(this).addClass('notification-success').html(data).show().delay(1200).fadeOut(800);
            getActiveTimesheets(getSelectedPage());
        }else{
            $('#notification').removeClass().addClass('notification-error').html(data.msg + data.errorList).show();
            alert('PHHAIL');
        }

        $('#waiting').hide();
        function(xhr, status, errorThrown){
            $('#waiting').hide();
        }
    }
});

}

And here is my PHP upload script:

    /**
 * Creates a directory in the active directory with the given folder name
 *
 * @author  RichardC
 * @param   string    $dirName
 * @return  boolean
 */
public function createDir( $dirName ) {

    $docRoot = getenv('DOCUMENT_ROOT');

    if (!is_dir(sprintf('%s/%s', $docRoot, $dirName))) {
        $makeDir = mkdir(sprintf('%s/%s', $docRoot, $dirName));
        echo sprintf('Creating a folder called \'/%s/\' ...', $dirName);
        if ($makeDir) {
            echo '<br />Successfully created the folder.<br />';
            return true;
        } else {
            echo sprintf('<br /> Sorry, please create the folder manually at: %s/%s', $docRoot, $dirName);
            return false;
        }
    }
}

/**
 * Uploads either a CSV or an EXCEL file to a temporary directory
 *
 * @author  RichardC
 * @param   Resource    $file
 * @return  Boolean     true/false
 */
public function upload( $filename ) {

    $filename = (!isset($filename)) ? $this->file : $filename;

    //Get the document root
    $docRoot = getenv('DOCUMENT_ROOT');

    $this->createDir('uploads');

    if (($_FILES['file']['type'] == 'application/vnd.ms-excel') || ($_FILES['file']['type'] == 'application/csv') || ($_FILES['file']['type'] == 'text/csv') || ($_FILES['file']['type'] == 'text/comma-separated-values') || ($_FILES['file']['type'] == 'application/excel') &&
            ($_FILES["file"]["size"] < 1000000)) {
        if ($_FILES["file"]["error"] > 0) {
            echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
        } else {
            if (file_exists($docRoot . "upload/" . $_FILES["file"]["name"])) {
                echo $_FILES["file"]["name"] . " already exists. ";
                $this->file = $docRoot . '/upload/' . $_FILES["file"]["name"];
            } else {
                move_uploaded_file($_FILES["file"]["tmp_name"], $docRoot . "/upload/" . $_FILES["file"]["name"]);
                $this->file = $docRoot . '/upload/' . $_FILES["file"]["name"];
            }
        }
    } else {
        echo "Invalid file";

        return false;
    }

    //Remove the unwanted file now
    $this->fileContents = file_get_contents($this->file);
    @unlink($this->file);
    unset($this->file);

    return true;
}

If anyone can help on this, it'd be much appreciated!

I am not sure that will allow for file fields... however, there's a JQuery plugin that handles submitting forms with files: jquery.malsup.com/form. Another option is using a file upload plugin like uploadify.com. — Michael C. Gates
– Michael C. Gates, Commented Sep 22, 2011 at 14:29

Snicksie · Accepted Answer · 2011-09-22 14:35:05Z

6

In order to make your multipart/formdata work, you must add some extra stuff in your ajax-request:

cache: false,
contentType: false,
processData: false,

You can easily create your data-field by doing this:

var uploadData = $("#uploadFile").prop("files")[0];
var newData = new FormData();

$.each($('#uploadFile').prop("files"), function(i, file) {
    newData.append('file-'+i, file);
});

in your ajax-request you'll have to set this:

data: newData

answered Sep 22, 2011 at 14:35

Snicksie

1,99717 silver badges27 bronze badges

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

2 Comments

DarkMantis Over a year ago

It still isn't working at the moment, but I'll keep trying with it and see what I can get to. Thanks again though mate!

Josh Mc Over a year ago

I believe this solution will only work in IE10+ (not IE9 and below)

Collectives™ on Stack Overflow

Using jQuery to send data from a multipart/form-data through ajax

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related