Question

I have recently tried using http://malsup.com/jquery/form/#file-upload for file upload, but I’m not entirely sure how to upload the image to a certain folder on the server.

Heres the jQuery:

(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
        //console.log(percentVal, position, total);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();

and then the HTML:

<h1>File Upload Progress Demo #3</h1>
<code>&lt;input type="file" name="myfile[]"></code><br>
<code>&lt;input type="file" name="myfile[]"></code><br>
<code>&lt;input type="file" name="myfile[]"></code>
<form action="files-raw.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile[]"><br>
    <input type="file" name="myfile[]"><br>
    <input type="file" name="myfile[]"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

Answer 1

The server side code is responsible for save the uploaded files to the server, As you are using PHP you can access the file through $_FILES["myfile"]. I assume you want code like this,

$newdirectory = "/your/directory";
$count = 0;
foreach ($_FILES['myfile']['name'] as $filename)
{
    $temp = $_FILES['myfile']['tmp_name'][$count];
    move_uploaded_file($temp, $newdirectory . '/' . basename($filename));
    $count++;
}

This should do as you are asking. More info on handling uploads here and on move_uploaded_file here