Skip to content

Instantly share code, notes, and snippets.

@joewood

joewood/example-fileupload.html

Created August 16, 2012 19:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save joewood/3372841 to your computer and use it in GitHub Desktop.
Save joewood/3372841 to your computer and use it in GitHub Desktop.
Download ZIP
Using JQuery File Upload with client resize
Raw
example-fileupload.html
<-- Example HTML/JS of how to use the JQuery File Upload library, with resizing -->
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>this is My Child</title>
<script src="scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
if (!window.console) console = { log: function () { }, clear: function () { } };
</script>
<script src="scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<!-- The basic File Upload plugin -->
<script type="text/javascript" src="scripts/JavaScript-Load-Image/load-image.js"></script>
<script type="text/javascript" src="scripts/JavaScript-Canvas-to-Blob/canvas-to-blob.js"></script>
<script type="text/javascript" src="scripts/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="scripts/blueimp-file-upload/js/jquery.fileupload-fp.js"></script>
<script type="text/ecmascript">
"use strict";
$(main);
function main() {
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
dataType: 'json',
process: [
{
action: 'load',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resize',
maxWidth: 200,
maxHeight: 200,
minWidth: 80,
minHeight: 80
},
{
action: 'save'
}
],
done: function (e, data) {
$.each(data.result, function (index, file) {
$('<p/>').text(file.url).appendTo(document.body);
$('<img src="' + file.url + '"/>').appendTo(document.body);
$('#progress .bar').css( 'width', '0px').text("");
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
alert(JSON.stringify(data));
$('#progress .bar').css( 'width', progress * 2 + 'px' ).text(parseInt(data.loaded / data.total * 100));
}
});
}
</script>
</head>
<body>
<h2>Test File Upload</h2>
<input id="fileupload" type="file" name="files[]" data-url="contacts/imageUrl" multiple>
<div id="progress" style="border: 2px solid black; margin: 5pt; width: 200px">
<div class="bar" style="width: 0%; background: green; height: 15pt"></div>
</div>
<p>Files: </p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment