<< Back to File Uploader page

AL UPLOADER, JQUERY PLUGIN

Is free to use, you can use in any your project .

Why I have done it . There is many scripts that have many buttons , take large amount of the screen , like plupload or similars . But I didnt find any basic script allow
upload files with one or two buttons multiple files via ajax ( with progress bar , image preview at the end , etc etc ).

This is one/two button upload script via html5 , ajax , multiple files , multiple forms/buttons. Eq. user choose some file , click "upload" and then file uploaded via ajax include progress bar.
On ajax response you can show images preview , or some info about files uploaded

Files to include

<link rel="stylesheet" href="al-uploader.css">


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<script src="al-uploader.js"></script>

How to use:

HTML

Initializing from javascript

$('#fileupload1').al_upload(
    {
       onsuccess: function(data)
       {
             alert("Uploaded");
       }
    }
);

where #fileupload1 is id of upload form .

PHP

$field_name='files';

$file = $_FILES[$field_name]['tmp_name'];
$type = $_FILES[$field_name]['type'];
$name = $_FILES[$field_name]['name'];
$size = $_FILES[$field_name]['size'];

above variable can be array in case multiple files uploaded

for( $i = 0; $i < count( $file ); $i++ )
{
write_log( $name[$i]."\n" );
}

Script options

bntfileclassselector

default value ".input-files"

is class selector of file select button , this need be located inside upload form

<input type="file" name="files[]" class="input-files" multiple>

btnfileid

default value is null

is another way to define selector of file select button as element id , can be located anywhere

$('#fileupload1').al_upload(
{
btnfileid: '#uploadbutton'
});

btnstartclassselector

default value is ".start"

is class selector of start upload button, this need be located inside upload form

<button type="submit" class="btn btn-primary start">

btnstartid

default value is null

is another way to define selector of start upload button as element id , can be located anywhere

infoclassselector

default value is ".files-selected"

class of divs where show info about currently selected files , this need be located inside upload form

<div class="files-selected">
</div>

infoid

default value is null

is another way to define selector of element with info about currently selected files, can be located anywhere

<div id="someid">
</div>

progressdivselector

default value is ".progress"

<div class="progress active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>

progressdivid

defaut value is null

progressbarselector

default value is ".progress-bar"

progressbarid

defaut value is null

max_file_names_label_length

default value is 20

showerrorstatus

default value is true

autostartupload

default value is false

Events

add

fired when some file added

$('#fileupload1').al_upload(
{
     add: function ()
     {

     }
}
);

beforeupload

fired before upload start

$('#fileupload1').al_upload(
{
     beforeupload: function ()
     {

     }
});

progress

fired when progressbar can be updated after new portion of data uploaded

$('#fileupload1').al_upload(
{
     progress: function ()
     {

     }
});

onsuccess

fired when files successfully uploaded

$('#fileupload1').al_upload(
{
     onsuccess: function (data)
     {
         console.log( data ); //json returned from php , you can return any data and process it in the javascript
     }
});

onerror

fired when error happen

$('#fileupload1').al_upload(
{
     onerror: function (error)
     {
        console.log( error ); //error need be returned in json response as 'error: xxxx' ,
                              //$response = array('error' => 'errror message'); print json_encode( $response );
     }
});

oncomplete

fired when upload done ( success or not )

$('#fileupload1').al_upload(
{
     oncomplete: function ()
     {
          //no params , fired when ajax upload done
     }
});