fileUpload.html
jQuery File Upload Demo
jQuery File Upload Demo
File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
Demo Notes
- The maximum file size for uploads in this demo is 5 MB (default file size is unlimited).
- Only image files (JPG, GIF, PNG) are allowed in this demo (by default there is no file type restriction).
- Uploaded files will be deleted automatically after 5 minutes (demo setting).
- You can drag & drop files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.
- Please refer to the project website and documentation for more information.
- Built with Twitter's Bootstrap toolkit and Icons from Glyphicons.
/*
* jQuery File Upload Plugin Localization Example 6.5.1
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2012, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
/*global window */
window.locale = {
"fileupload": {
"errors": {
"maxFileSize": "File is too big",
"minFileSize": "File is too small",
"acceptFileTypes": "Filetype not allowed",
"maxNumberOfFiles": "Max number of files exceeded",
"uploadedBytes": "Uploaded bytes exceed file size",
"emptyResult": "Empty file upload result"
},
"error": "Error",
"start": "Start",
"cancel": "Cancel",
"destroy": "Delete"
}
};
/*
* jQuery File Upload Plugin JS Example 6.7
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
/*jslint nomen: true, unparam: true, regexp: true */
/*global $, window, document */
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload();
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
if (window.location.hostname === 'blueimp.github.com') {
// Demo settings:
$('#fileupload').fileupload('option', {
url: '//jquery-file-upload.appspot.com/',
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
process: [
{
action: 'load',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resize',
maxWidth: 1440,
maxHeight: 900
},
{
action: 'save'
}
]
});
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
url: '//jquery-file-upload.appspot.com/',
type: 'HEAD'
}).fail(function () {
$('')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
} else {
// Load existing files:
$('#fileupload').each(function () {
var that = this;
$.getJSON(this.action, function (result) {
if (result && result.length) {
$(that).fileupload('option', 'done')
.call(that, null, {result: result});
}
});
});
}
});
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$("tr:has(td)").remove();
$.each(data.result, function (index, file) {
$("#uploaded-files").append(
$('')
.append($('').text(file.fileName))
.append($('').text(file.fileSize))
.append($('').text(file.fileType))
.append($('').html("Click"))
)//end $("#uploaded-files").append()
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
},
dropZone: $('#dropzone')
});
});