Skip to content

Instantly share code, notes, and snippets.

@hailwood

hailwood/basic.php

Last active December 26, 2015 07:19
Show Gist options
  • Save hailwood/7114558 to your computer and use it in GitHub Desktop.
Save hailwood/7114558 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
basic.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo - Basic version</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fileupload.css">
</head>
<body>
<div class="container">
<h1>jQuery File Upload Demo</h1>
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="files" class="files"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
$(function () {
var $progress = $('#progress').find('.progress-bar');
// Change this to the location of your server-side upload handler:
var url = 'https://AMAZON_S3_BUCKET_NAME.s3.amazonaws.com/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$progress.css('width', progress + '%');
}
})
.prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment