2014-10-05 08:18:50 +00:00
<!DOCTYPE HTML>
<!--
/*
2017-06-27 00:32:38 +00:00
* jQuery File Upload Plugin Basic Plus Demo
2014-10-05 08:18:50 +00:00
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
2017-06-27 00:32:38 +00:00
* https://opensource.org/licenses/MIT
2014-10-05 08:18:50 +00:00
*/
-->
< html lang = "en" >
< head >
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!-- [if IE]><meta http - equiv="X - UA - Compatible" content="IE=edge,chrome=1"><![endif] -->
< 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&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" >
<!-- Bootstrap styles -->
2019-04-09 01:35:23 +00:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous" >
2014-10-05 08:18:50 +00:00
<!-- Generic page styles -->
< link rel = "stylesheet" href = "css/style.css" >
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
< link rel = "stylesheet" href = "css/jquery.fileupload.css" >
< / head >
< body >
< div class = "navbar navbar-default navbar-fixed-top" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-fixed-top .navbar-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "https://github.com/blueimp/jQuery-File-Upload" > jQuery File Upload< / a >
< / div >
< div class = "navbar-collapse collapse" >
< ul class = "nav navbar-nav" >
< li > < a href = "https://github.com/blueimp/jQuery-File-Upload/tags" > 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://blueimp.net" > © Sebastian Tschan< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< div class = "container" >
< 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 >
< li > < a href = "jquery-ui.html" > jQuery UI< / a > < / li >
< / ul >
< br >
< blockquote >
< p > File Upload widget with multiple file selection, drag& 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 >
< br >
<!-- The fileinput - button span is used to style the file input field as button -->
< span class = "btn btn-success fileinput-button" >
< i class = "glyphicon glyphicon-plus" > < / 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" >
< div class = "progress-bar progress-bar-success" > < / div >
< / div >
<!-- The container for the uploaded files -->
< div id = "files" class = "files" > < / div >
< br >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h3 class = "panel-title" > Demo Notes< / h3 >
< / div >
< div class = "panel-body" >
< ul >
2017-06-27 00:32:38 +00:00
< li > The maximum file size for uploads in this demo is < strong > 999 KB< / strong > (default file size is unlimited).< / li >
2014-10-05 08:18:50 +00:00
< li > Only image files (< strong > JPG, GIF, PNG< / strong > ) are allowed in this demo (by default there is no file type restriction).< / li >
2017-06-27 00:32:38 +00:00
< li > Uploaded files will be deleted automatically after < strong > 5 minutes or less< / strong > (demo files are stored in memory).< / li >
2014-10-05 08:18:50 +00:00
< li > You can < strong > drag & drop< / strong > files from your desktop on this webpage (see < a href = "https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support" > Browser support< / a > ).< / 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 the < a href = "http://getbootstrap.com/" > Bootstrap< / a > CSS framework and Icons from < a href = "http://glyphicons.com/" > Glyphicons< / a > .< / li >
< / ul >
< / div >
< / div >
< / div >
2019-04-09 01:35:23 +00:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity = "sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin = "anonymous" > < / script >
2014-10-05 08:18:50 +00:00
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
< script src = "js/vendor/jquery.ui.widget.js" > < / script >
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
2019-04-09 01:35:23 +00:00
< script src = "https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js" > < / script >
2014-10-05 08:18:50 +00:00
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
2018-10-23 00:00:33 +00:00
< script src = "https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js" > < / script >
2014-10-05 08:18:50 +00:00
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
2019-04-09 01:35:23 +00:00
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous" > < / script >
2014-10-05 08:18:50 +00:00
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
< script src = "js/jquery.iframe-transport.js" > < / script >
<!-- The basic File Upload plugin -->
< script src = "js/jquery.fileupload.js" > < / script >
<!-- The File Upload processing plugin -->
< script src = "js/jquery.fileupload-process.js" > < / script >
<!-- The File Upload image preview & resize plugin -->
< script src = "js/jquery.fileupload-image.js" > < / script >
<!-- The File Upload audio preview plugin -->
< script src = "js/jquery.fileupload-audio.js" > < / script >
<!-- The File Upload video preview plugin -->
< script src = "js/jquery.fileupload-video.js" > < / script >
<!-- The File Upload validation plugin -->
< script src = "js/jquery.fileupload-validate.js" > < / script >
< script >
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'blueimp.github.io' ?
'//jquery-file-upload.appspot.com/' : 'server/php/',
uploadButton = $('< button / > ')
.addClass('btn btn-primary')
.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,
2017-06-27 00:32:38 +00:00
maxFileSize: 999000,
2014-10-05 08:18:50 +00:00
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
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($('< span class = "text-danger" / > ').text(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 .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
if (file.url) {
var link = $('< a > ')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
} else if (file.error) {
var error = $('< span class = "text-danger" / > ').text(file.error);
$(data.context.children()[index])
.append('< br > ')
.append(error);
}
});
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index) {
var error = $('< span class = "text-danger" / > ').text('File upload failed.');
$(data.context.children()[index])
.append('< br > ')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
< / script >
2017-06-27 00:32:38 +00:00
< / body >
2014-10-05 08:18:50 +00:00
< / html >