<html lang="en">

<meta charset="utf-8">

<title>jQuery File Upload Demo - Basic Plus version</title>

<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">

<link rel="stylesheet" href="css/jquery.fileupload-ui.css">

<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</a>

<a class="brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>

<div class="nav-collapse">

<ul class="nav">

<li class="active"><a href="http://blueimp.github.com/jQuery-File-Upload/">Demo</a></li>

<li><a href="https://github.com/blueimp/jQuery-File-Upload#download">Download</a></li>

<li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>

<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>

<li><a href="https://github.com/blueimp/jQuery-File-Upload#support">Support</a></li>

<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>

</ul>

</div>

</div>

</div>

<div class="container">

<div class="page-header">

<h1>jQuery File Upload Demo</h1>

<h2 class="lead">Basic Plus version</h2>

<ul class="nav nav-tabs">

<li><a href="basic.html">Basic</a></li>

<li class="active"><a href="basic-plus.html">Basic Plus</a></li>

<li><a href="index.html">Basic Plus UI</a></li>

<li><a href="angularjs.html">AngularJS</a></li>

</ul>

<blockquote>

<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery.<br>

Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>

Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>

</blockquote>

</div>

<!-- The fileinput-button span is used to style the file input field as button -->

<span class="btn btn-success fileinput-button">

<i class="icon-plus icon-white"></i>

<span>Add files...</span>

<!-- The file input field used as target for the file upload widget -->

<input id="fileupload" type="file" name="files[]" multiple>

</span>

<br>

<br>

<!-- The global progress bar -->

<div id="progress" class="progress progress-success progress-striped">

<div class="bar"></div>

</div>

<!-- The container for the uploaded files -->

<div id="files" class="files"></div>

<br>

<div class="well">

<h3>Demo Notes</h3>

<ul>

<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>

<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>

<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>

<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>

<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>

<li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> toolkit and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>

</ul>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="js/vendor/jquery.ui.widget.js"></script>

<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>

<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>

<script src="js/jquery.iframe-transport.js"></script>

<script src="js/jquery.fileupload.js"></script>

<script src="js/jquery.fileupload-process.js"></script>

<script src="js/jquery.fileupload-image.js"></script>

<script src="js/jquery.fileupload-audio.js"></script>

<script src="js/jquery.fileupload-video.js"></script>

<script src="js/jquery.fileupload-validate.js"></script>

$(function () {

'use strict';

// Change this to the location of your server-side upload handler:

var url = (window.location.hostname === 'blueimp.github.com' ||

window.location.hostname === 'blueimp.github.io') ?

'//jquery-file-upload.appspot.com/' : 'server/php/',

uploadButton = $('<button/>')

.addClass('btn')

.prop('disabled', true)

.text('Processing...')

.on('click', function () {

var $this = $(this),

data = $this.data();

$this

.off('click')

.text('Abort')

.on('click', function () {

$this.remove();

data.abort();

});

data.submit().always(function () {

$this.remove();

});

});

$('#fileupload').fileupload({

url: url,

dataType: 'json',

autoUpload: false,

acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,

maxFileSize: 5000000, // 5 MB

loadImageMaxFileSize: 15000000, // 15MB

disableImageResize: false,

previewMaxWidth: 100,

previewMaxHeight: 100,

previewCrop: true

}).on('fileuploadadd', function (e, data) {

data.context = $('<div/>').appendTo('#files');

$.each(data.files, function (index, file) {

var node = $('<p/>')

.append($('<span/>').text(file.name));

if (!index) {

node

.append('<br>')

.append(uploadButton.clone(true).data(data));

}

node.appendTo(data.context);

});

}).on('fileuploadprocessalways', function (e, data) {

var index = data.index,

file = data.files[index],

node = $(data.context.children()[index]);

if (file.preview) {

node

.prepend('<br>')

.prepend(file.preview);

}

if (file.error) {

node

.append('<br>')

.append(file.error);

}

if (index + 1 === data.files.length) {

data.context.find('button')

.text('Upload')

.prop('disabled', !!data.files.error);

}

}).on('fileuploadprogressall', function (e, data) {

var progress = parseInt(data.loaded / data.total * 100, 10);

$('#progress .bar').css(

'width',

progress + '%'

);

}).on('fileuploaddone', function (e, data) {

$.each(data.result.files, function (index, file) {

var link = $('<a>')

.attr('target', '_blank')

.prop('href', file.url);

$(data.context.children()[index])

.wrap(link);

});

}).on('fileuploadfail', function (e, data) {

$.each(data.result.files, function (index, file) {

var error = $('<span/>').text(file.error);

$(data.context.children()[index])

.append('<br>')

.append(error);

});

});

</body>