Small Uploader

This demo allows uploading .jpg, .jpeg, .png and .gif files which are less than 500KB. It also shows an error if you try to upload a .pdf file.

Overview

Small Uploader is a PHP script which allows uploading multiple files WITHOUT using Flash. This file uploader uses AJAX and will not force the page to reload. The feedback about uploading files are given through it's well designed user interface. This script is perfect for uploading small files.

• Supports drag and drop upload (FF v3.6+, Chrome, Safari on Mac v5+)
• Gracefully switch to no drag and drop upload for browsers that don't support drag and drop
• Provides callback events so you can perfectly control the follow of your application
• It's super easy to integrate into an existing website
• Displays icons according to the file type
• Can queue multiple files to upload
• Can be configured to limit the queue size
• Can be configured to limit by file types
• Can be configured to limit file size
• Highlights each file as it gets uploaded
• Shows server errors against each offending file
• Marks successful uploads with green mark
• Marks unsuccessful uploads in red mark
• Uses JavaScript to handle uploads
• Doesn't use Flash

Code For This Demo

$(window).ready(function(){
  $(".smalluploader").SmallFileUploader({
    maxAllowedFiles: 3,
    maxFileSize: 1024 * 500,
    allowedTypes: ["jpeg", "jpg", "png", "gif", "pdf"]
  });
});

<div class="smalluploader">
  <div class="dragspace hidden">
    <p class="zonemessage">Drag your files in here</p>
    <p class="message">unlimited number of files allowed </p>
  </div>
  <div class="buttons">
    <a class="addbutton greenbutton hidden">
      Add File
      <form enctype="multipart/form-data" method="post" action="projects/smalluploader/ajaxuploader.php"> 
        <input type="file" name="filedata"/>
      </form>
    </a>
  </div>
  <div class="uploadspace hidden"></div>
  <div class="buttons">
    <a class="startbutton redbutton hidden">Upload Files</a>
    <a class="clearbutton redbutton hidden">Clear Queue</a>
  </div>
</div>

Other Scripts