simpleUpload.js
Unlike many JavaScript upload libraries on the interwebs, simpleUpload is an extremely simple yet powerful jQuery file upload plugin designed to be non-intrusive, backwards-compatible, flexible, and very easy to understand.
Features
- Multiple uploads
- File type and size filtering
- HTML5 Ajax upload with fallback to iframe
- Simultaneous uploads
- Plays nicely with drag-n-drop
- Cross-domain uploads
- Cancellable uploads
- Client-side hashing for integration with deduplication systems (premium feature only)
Browser Support
Desktop:
- Google Chrome
- Firefox 3+
- IE 6+
- Safari 4+
- Opera 10.6+
Mobile:
- iOS 6+
- Android 2.2+
- Windows Phone 8.1+
- Opera Mobile 11.50+
Note: IE8+ and Firefox 3.6+ required for cross-domain uploads
Basic Usage
$('#file').simpleUpload("/ajax/upload.php", { start: function(file){ //upload started }, progress: function(progress){ //received progress }, success: function(data){ //upload successful }, error: function(error){ //upload failed } }); Example #1: Single File Upload with Progress Bar
JavaScript
$(document).ready(function(){ $('input[type=file]').change(function(){ $(this).simpleUpload("/ajax/upload.php", { start: function(file){ //upload started $('#filename').html(file.name); $('#progress').html(""); $('#progressBar').width(0); }, progress: function(progress){ //received progress $('#progress').html("Progress: " + Math.round(progress) + "%"); $('#progressBar').width(progress + "%"); }, success: function(data){ //upload successful $('#progress').html("Success!<br>Data: " + JSON.stringify(data)); }, error: function(error){ //upload failed $('#progress').html("Failure!<br>" + error.name + ": " + error.message); } }); }); }); HTML
<div id="filename"></div><div id="progress"></div><div id="progressBar"></div> <input type="file" name="file"> Example #2: Multiple File Upload
JavaScript
$(document).ready(function(){ $('input[type=file]').change(function(){ $(this).simpleUpload("/ajax/upload.php", { /* * Each of these callbacks are executed for each file. * To add callbacks that are executed only once, see init() and finish(). * * "this" is an object that can carry data between callbacks for each file. * Data related to the upload is stored in this.upload. */ start: function(file){ //upload started this.block = $('<div class="block"></div>'); this.progressBar = $('<div class="progressBar"></div>'); this.block.append(this.progressBar); $('#uploads').append(this.block); }, progress: function(progress){ //received progress this.progressBar.width(progress + "%"); }, success: function(data){ //upload successful this.progressBar.remove(); /* * Just because the success callback is called doesn't mean your * application logic was successful, so check application success. * * Data as returned by the server on... * success: {"success":true,"format":"..."} * error: {"success":false,"error":{"code":1,"message":"..."}} */ if (data.success) { //now fill the block with the format of the uploaded file var format = data.format; var formatDiv = $('<div class="format"></div>').text(format); this.block.append(formatDiv); } else { //our application returned an error var error = data.error.message; var errorDiv = $('<div class="error"></div>').text(error); this.block.append(errorDiv); } }, error: function(error){ //upload failed this.progressBar.remove(); var error = error.message; var errorDiv = $('<div class="error"></div>').text(error); this.block.append(errorDiv); } }); }); }); HTML
<div id="uploads"></div> <input type="file" name="file" multiple> Example #3: Cancellable Uploads (with file type & size filtering)
JavaScript
$(document).ready(function(){ $('input[type=file]').change(function(){ $(this).simpleUpload("/ajax/upload.php", { allowedExts: ["jpg", "jpeg", "jpe", "jif", "jfif", "jfi", "png", "gif"], allowedTypes: ["image/pjpeg", "image/jpeg", "image/png", "image/x-png", "image/gif", "image/x-gif"], maxFileSize: 5000000, //5MB in bytes start: function(file){ //upload started this.block = $('<div class="block"></div>'); this.progressBar = $('<div class="progressBar"></div>'); this.cancelButton = $('<div class="cancelButton">x</div>'); /* * Since "this" differs depending on the function in which it is called, * we need to assign "this" to a local variable to be able to access * this.upload.cancel() inside another function call. */ var that = this; this.cancelButton.click(function(){ that.upload.cancel(); //now, the cancel callback will be called }); this.block.append(this.progressBar).append(this.cancelButton); $('#uploads').append(this.block); }, progress: function(progress){ //received progress this.progressBar.width(progress + "%"); }, success: function(data){ //upload successful this.progressBar.remove(); this.cancelButton.remove(); if (data.success) { //now fill the block with the format of the uploaded file var format = data.format; var formatDiv = $('<div class="format"></div>').text(format); this.block.append(formatDiv); } else { //our application returned an error var error = data.error.message; var errorDiv = $('<div class="error"></div>').text(error); this.block.append(errorDiv); } }, error: function(error){ //upload failed this.progressBar.remove(); this.cancelButton.remove(); var error = error.message; var errorDiv = $('<div class="error"></div>').text(error); this.block.append(errorDiv); }, cancel: function(){ //upload cancelled this.block.fadeOut(400, function(){ $(this).remove(); }); } }); }); }); HTML
<div id="uploads"></div> <input type="file" name="file" multiple> Server-side
No external scripts required. I have written these examples in PHP, but they can be written in any language.
Same-domain Upload
<?php /* * All of your application logic with $_FILES["file"] goes here. * It is important that nothing is outputted yet. */ // $output will be converted into JSON if ($sucess) { $output = array("success" => true, "message" => "Success!");} else { $output = array("success" => false, "error" => "Failure!");} if (($iframeId = (int)$_GET["_iframeUpload"]) > 0) { //old browser... header("Content-Type: text/html; charset=utf-8"); ?> <!DOCTYPE html><html><head></head><body><script type="text/javascript"> var data = { id: <?php echo $iframeId; ?>, type: "json", data: <?php echo json_encode($output); ?>}; parent.simpleUpload.iframeCallback(data); </script> </body></html><?php } else { //new browser... header("Content-Type: application/json; charset=utf-8"); echo json_encode($output); } ?> Cross-domain Upload
<?php $remoteOrigin = "http://www.remote-domain.com"; //change to the origin of your webpage /* FOR AJAX CORS REQUESTS */ if ($_SERVER["HTTP_ORIGIN"]===$remoteOrigin) { header("Access-Control-Allow-Origin: " . $_SERVER["HTTP_ORIGIN"]); /* Uncomment to allow cookies across domains */ //header("Access-Control-Allow-Credentials: true"); /* Uncomment to improve performance after testing */ //header("Access-Control-Max-Age: 86400"); // cache for 1 day } if ($_SERVER["REQUEST_METHOD"]==="OPTIONS") { if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_METHOD"])) header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"])) header("Access-Control-Allow-Headers: " . $_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"]); exit(0); } /* END AJAX CORS CONFIGURATION */ /* * All of your application logic with $_FILES["file"] goes here. * It is important that nothing is outputted yet. */ // $output will be converted into JSON if ($sucess) { $output = array("success" => true, "message" => "Success!");} else { $output = array("success" => false, "error" => "Failure!");} if (($iframeId = (int)$_GET["_iframeUpload"]) > 0) { //old browser... header("Content-Type: text/html; charset=utf-8"); ?> <!DOCTYPE html><html><head></head><body><script type="text/javascript"> var data = { namespace: "simpleUpload", id: <?php echo $iframeId; ?>, type: "json", data: <?php echo json_encode($output); ?>, xDomain: "<?php echo $remoteOrigin; ?>"}; try { parent.simpleUpload.iframeCallback(data);} catch(e) { parent.postMessage(JSON.stringify(data), data.xDomain);} </script> </body></html><?php } else { //new browser... header("Content-Type: application/json; charset=utf-8"); echo json_encode($output); } ?> I created simpleUpload.js because I could not find a solution for uploading files that was simple, efficient, non-intrusive, and backwards-compatible. Now it exists.