2014-10-05 08:18:50 +00:00
<!DOCTYPE HTML>
<!--
/*
2017-06-27 00:32:38 +00:00
* jQuery File Upload Plugin jQuery UI 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 - jQuery UI version< / title >
< meta name = "description" content = "File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video 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." >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
<!-- jQuery UI styles -->
< link rel = "stylesheet" href = "//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/dark-hive/jquery-ui.css" id = "theme" >
<!-- Demo styles -->
< link rel = "stylesheet" href = "css/demo.css" >
<!-- [if lte IE 8]>
< link rel = "stylesheet" href = "css/demo-ie8.css" >
<![endif]-->
< style >
/* Adjust the jQuery UI widget font-size: */
.ui-widget {
font-size: 0.95em;
}
< / style >
<!-- blueimp Gallery styles -->
< link rel = "stylesheet" href = "//blueimp.github.io/Gallery/css/blueimp-gallery.min.css" >
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
< link rel = "stylesheet" href = "css/jquery.fileupload.css" >
< link rel = "stylesheet" href = "css/jquery.fileupload-ui.css" >
<!-- CSS adjustments for browsers with JavaScript disabled -->
< noscript > < link rel = "stylesheet" href = "css/jquery.fileupload-noscript.css" > < / noscript >
< noscript > < link rel = "stylesheet" href = "css/jquery.fileupload-ui-noscript.css" > < / noscript >
< / head >
< body >
< ul class = "navigation" >
< li > < h3 > < a href = "https://github.com/blueimp/jQuery-File-Upload" > jQuery File Upload< / a > < / h3 > < / li >
< 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" > © blueimp.net< / a > < / li >
< / ul >
< h1 > jQuery File Upload Demo< / h1 >
< h2 > jQuery UI version< / h2 >
< form >
< label for = "theme-switcher" > Theme:< / label >
< select id = "theme-switcher" class = "pull-right" >
< option value = "black-tie" > Black Tie< / option >
< option value = "blitzer" > Blitzer< / option >
< option value = "cupertino" > Cupertino< / option >
< option value = "dark-hive" selected > Dark Hive< / option >
< option value = "dot-luv" > Dot Luv< / option >
< option value = "eggplant" > Eggplant< / option >
< option value = "excite-bike" > Excite Bike< / option >
< option value = "flick" > Flick< / option >
< option value = "hot-sneaks" > Hot sneaks< / option >
< option value = "humanity" > Humanity< / option >
< option value = "le-frog" > Le Frog< / option >
< option value = "mint-choc" > Mint Choc< / option >
< option value = "overcast" > Overcast< / option >
< option value = "pepper-grinder" > Pepper Grinder< / option >
< option value = "redmond" > Redmond< / option >
< option value = "smoothness" > Smoothness< / option >
< option value = "south-street" > South Street< / option >
< option value = "start" > Start< / option >
< option value = "sunny" > Sunny< / option >
< option value = "swanky-purse" > Swanky Purse< / option >
< option value = "trontastic" > Trontastic< / option >
< option value = "ui-darkness" > UI Darkness< / option >
< option value = "ui-lightness" > UI Lightness< / option >
< option value = "vader" > Vader< / option >
< / select >
< / form >
< ul class = "navigation" >
< li > < a href = "basic.html" > Basic< / a > < / li >
< li > < 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 class = "active" > < a href = "jquery-ui.html" > jQuery UI< / a > < / li >
< / ul >
< blockquote >
< p > File Upload widget with multiple file selection, drag& drop support, progress bars, validation and preview images, audio and video for jQuery UI.< 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 >
<!-- The file upload form used as target for the file upload widget -->
< form id = "fileupload" action = "//jquery-file-upload.appspot.com/" method = "POST" enctype = "multipart/form-data" >
<!-- Redirect browsers with JavaScript disabled to the origin page -->
< noscript > < input type = "hidden" name = "redirect" value = "https://blueimp.github.io/jQuery-File-Upload/" > < / noscript >
<!-- The fileupload - buttonbar contains buttons to add/delete files and start/cancel the upload -->
< div class = "fileupload-buttonbar" >
< div class = "fileupload-buttons" >
<!-- The fileinput - button span is used to style the file input field as button -->
< span class = "fileinput-button" >
< span > Add files...< / span >
< input type = "file" name = "files[]" multiple >
< / span >
< button type = "submit" class = "start" > Start upload< / button >
< button type = "reset" class = "cancel" > Cancel upload< / button >
< button type = "button" class = "delete" > Delete< / button >
< input type = "checkbox" class = "toggle" >
<!-- The global file processing state -->
< span class = "fileupload-process" > < / span >
< / div >
<!-- The global progress state -->
< div class = "fileupload-progress fade" style = "display:none" >
<!-- The global progress bar -->
< div class = "progress" role = "progressbar" aria-valuemin = "0" aria-valuemax = "100" > < / div >
<!-- The extended global progress state -->
< div class = "progress-extended" > < / div >
< / div >
< / div >
<!-- The table listing the files available for upload/download -->
< table role = "presentation" > < tbody class = "files" > < / tbody > < / table >
< / form >
< br >
< h3 > Demo Notes< / h3 >
< 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 < a href = "https://jqueryui.com" > jQuery UI< / a > .< / li >
< / ul >
<!-- The blueimp Gallery widget -->
< div id = "blueimp-gallery" class = "blueimp-gallery blueimp-gallery-controls" data-filter = ":even" >
< div class = "slides" > < / div >
< h3 class = "title" > < / h3 >
< a class = "prev" > ‹ < / a >
< a class = "next" > › < / a >
< a class = "close" > × < / a >
< a class = "play-pause" > < / a >
< ol class = "indicator" > < / ol >
< / div >
<!-- The template to display files available for upload -->
< script id = "template-upload" type = "text/x-tmpl" >
{% for (var i=0, file; file=o.files[i]; i++) { %}
< tr class = "template-upload fade" >
< td >
< span class = "preview" > < / span >
< / td >
< td >
< p class = "name" > {%=file.name%}< / p >
< strong class = "error" > < / strong >
< / td >
< td >
< p class = "size" > Processing...< / p >
< div class = "progress" > < / div >
< / td >
< td >
{% if (!i & & !o.options.autoUpload) { %}
< button class = "start" disabled > Start< / button >
{% } %}
{% if (!i) { %}
< button class = "cancel" > Cancel< / button >
{% } %}
< / td >
< / tr >
{% } %}
< / script >
<!-- The template to display files available for download -->
< script id = "template-download" type = "text/x-tmpl" >
{% for (var i=0, file; file=o.files[i]; i++) { %}
< tr class = "template-download fade" >
< td >
< span class = "preview" >
{% if (file.thumbnailUrl) { %}
< a href = "{%=file.url%}" title = "{%=file.name%}" download = "{%=file.name%}" data-gallery > < img src = "{%=file.thumbnailUrl%}" > < / a >
{% } %}
< / span >
< / td >
< td >
< p class = "name" >
< a href = "{%=file.url%}" title = "{%=file.name%}" download = "{%=file.name%}" { % = file . thumbnailUrl ? ' data-gallery ' : ' ' % } > {%=file.name%}< / a >
< / p >
{% if (file.error) { %}
< div > < span class = "error" > Error< / span > {%=file.error%}< / div >
{% } %}
< / td >
< td >
< span class = "size" > {%=o.formatFileSize(file.size)%}< / span >
< / td >
< td >
< button class = "delete" data-type = "{%=file.deleteType%}" data-url = "{%=file.deleteUrl%}" { % if ( file . deleteWithCredentials ) { % } data-xhr-fields = '{"withCredentials":true}' { % } % } > Delete< / button >
< input type = "checkbox" name = "delete" value = "1" class = "toggle" >
< / td >
< / tr >
{% } %}
< / script >
2017-06-27 00:32:38 +00:00
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < / script >
< script src = "//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" > < / script >
2014-10-05 08:18:50 +00:00
<!-- The Templates plugin is included to render the upload/download listings -->
< script src = "//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js" > < / script >
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
< script src = "//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js" > < / script >
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
< script src = "//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js" > < / script >
<!-- blueimp Gallery script -->
< script src = "//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js" > < / script >
<!-- 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 >
<!-- The File Upload user interface plugin -->
< script src = "js/jquery.fileupload-ui.js" > < / script >
<!-- The File Upload jQuery UI plugin -->
< script src = "js/jquery.fileupload-jquery-ui.js" > < / script >
<!-- The main application script -->
< script src = "js/main.js" > < / script >
< script >
// Initialize the jQuery UI theme switcher:
$('#theme-switcher').change(function () {
var theme = $('#theme');
theme.prop(
'href',
theme.prop('href').replace(
/[\w\-]+\/jquery-ui.css/,
$(this).val() + '/jquery-ui.css'
)
);
});
< / script >
<!-- The XDomainRequest Transport is included for cross - domain file deletion for IE 8 and IE 9 -->
<!-- [if (gte IE 8)&(lt IE 10)]>
< script src = "js/cors/jquery.xdr-transport.js" > < / script >
<![endif]-->
2017-06-27 00:32:38 +00:00
< / body >
2014-10-05 08:18:50 +00:00
< / html >