arius86/jquery-uploader

jQuery Uploader

#jQuery Uploader

The simplest configuration:

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

$('input[type="file"]').upload({
  url: '/upload'
});

<form enctype="multipart/form-data" action="/javascript.php" method="post">
   <input type="file" name="file"  multiple="multiple"/>
   <div data-jq-upload-error></div>
   <div data-jq-upload-preview></div>
</form>

#jQuery Uploader Options

$('input[type="file"]').upload({
   url: '/', //The url where the file will be sent to
   preview: { 
       selector: '[data-jq-upload-preview]', //Selector of item where preview will be displayed
       width: 400, //Width of preview image
       height: 200 //Height or preview image
   },
   trigger: {
       type: 'button', //Available options ['button', 'dropzone']
       attributes: {                                   // ['id', 'class', 'style'...]
           id: 'button-id', //Trigger id attribute 
           class: 'button-class', //Trigger class attribute
           style: 'width:100px' //Trigger style attribute
           ... //You can add whatever attribute you want to
       }
   },
   selectFileText: 'Select file from your hard drive', //Text displayed inside button or dropzone
   timeout: 8000, //Timeout of ajax request
   maxFiles: 4, //Max available number of uploaded files
   maxSize: '80000000', //Max size of single file in bytes
   allowedMimeTypes: ['image/jpeg'], //Allowed mimetypes of uploaded files
   allowedExtensions: ['jpg'], //Allowed extensions of uploaded files
   error: {
       selector: '[data-jq-upload-error]', //Selector where errors will be set when appear
       attributes: { //Attributes of error html element
           style: 'border:1px solid red; color:red;'
           ... //You can add whatever attribute you want to
       }
   },
   buttons: { 
       upload: {
           text: 'Upload a file' //Text of upload button,
           attributes: {
               id: 'button-upload-id',
               class: 'button-upload-class',
               ... //You can add whatever attribute you want to
           },
           onClick: function(event, config) {} //It will be trigered on click for upload button
       },
       cancel: {
           text: 'Remove a file' //Text of remove button,
           attributes: {
               id: 'button-cancel-id',
               class: 'button-cancel-class',
               ... //You can add whatever attribute you want to
           },
           onClick: function(event, config) {} //It will be trigered on click for cancel button.
       },
       uploadAll: {
           text: 'Upload all files',
           attributes: {
               class: 'btn btn-form-submit'
           }
       }       
   },
   upload: {
       onAbort: function(event, config) {}, //Function that is triggered when request is aborted
       onError: function(event, config) {}, //Function that is triggered when request upload failed
       onTimeout: function(event, config) {}, //Function that is triggered after timeout
       onSuccess: function(event, config) {}, //Function that is triggered after successfully uploading
       onLoadEnd: function(event, config) {}, //Function that is triggered when request is finished
       onProgress: function(event, config) {}, //Function that is triggered during upload 
       onLoadStart: function(event, config) {} //Function that is triggered when upload starts
   }
});