2014-10-05 08:18:50 +00:00
<!DOCTYPE HTML>
<!--
/*
2017-06-27 00:32:38 +00:00
* jQuery File Upload Plugin Demo
2014-10-05 08:18:50 +00:00
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, 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< / 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" >
<!-- 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" >
<!-- blueimp Gallery styles -->
2018-10-23 00:00:33 +00:00
< link rel = "stylesheet" href = "https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css" >
2014-10-05 08:18:50 +00:00
<!-- 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 >
< 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 UI version< / h2 >
< ul class = "nav nav-tabs" >
< li > < a href = "basic.html" > Basic< / a > < / li >
< li > < a href = "basic-plus.html" > Basic Plus< / a > < / li >
< li class = "active" > < 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 bars, 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 file upload form used as target for the file upload widget -->
2018-10-23 00:00:33 +00:00
< form id = "fileupload" action = "https://jquery-file-upload.appspot.com/" method = "POST" enctype = "multipart/form-data" >
2014-10-05 08:18:50 +00:00
<!-- 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 = "row fileupload-buttonbar" >
< div class = "col-lg-7" >
<!-- 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 >
< input type = "file" name = "files[]" multiple >
< / span >
< button type = "submit" class = "btn btn-primary start" >
< i class = "glyphicon glyphicon-upload" > < / i >
< span > Start upload< / span >
< / button >
< button type = "reset" class = "btn btn-warning cancel" >
< i class = "glyphicon glyphicon-ban-circle" > < / i >
< span > Cancel upload< / span >
< / button >
< button type = "button" class = "btn btn-danger delete" >
< i class = "glyphicon glyphicon-trash" > < / i >
< span > Delete< / span >
< / button >
< input type = "checkbox" class = "toggle" >
<!-- The global file processing state -->
< span class = "fileupload-process" > < / span >
< / div >
<!-- The global progress state -->
< div class = "col-lg-5 fileupload-progress fade" >
<!-- The global progress bar -->
< div class = "progress progress-striped active" role = "progressbar" aria-valuemin = "0" aria-valuemax = "100" >
< div class = "progress-bar progress-bar-success" style = "width:0%;" > < / div >
< / 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" class = "table table-striped" > < tbody class = "files" > < / tbody > < / table >
< / form >
< 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 >
<!-- 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 text-danger" > < / strong >
< / td >
< td >
< p class = "size" > Processing...< / p >
< div class = "progress progress-striped active" role = "progressbar" aria-valuemin = "0" aria-valuemax = "100" aria-valuenow = "0" > < div class = "progress-bar progress-bar-success" style = "width:0%;" > < / div > < / div >
< / td >
< td >
{% if (!i & & !o.options.autoUpload) { %}
< button class = "btn btn-primary start" disabled >
< i class = "glyphicon glyphicon-upload" > < / i >
< span > Start< / span >
< / button >
{% } %}
{% if (!i) { %}
< button class = "btn btn-warning cancel" >
< i class = "glyphicon glyphicon-ban-circle" > < / i >
< span > Cancel< / span >
< / 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" >
{% if (file.url) { %}
< a href = "{%=file.url%}" title = "{%=file.name%}" download = "{%=file.name%}" { % = file . thumbnailUrl ? ' data-gallery ' : ' ' % } > {%=file.name%}< / a >
{% } else { %}
< span > {%=file.name%}< / span >
{% } %}
< / p >
{% if (file.error) { %}
< div > < span class = "label label-danger" > Error< / span > {%=file.error%}< / div >
{% } %}
< / td >
< td >
< span class = "size" > {%=o.formatFileSize(file.size)%}< / span >
< / td >
< td >
{% if (file.deleteUrl) { %}
< button class = "btn btn-danger delete" data-type = "{%=file.deleteType%}" data-url = "{%=file.deleteUrl%}" { % if ( file . deleteWithCredentials ) { % } data-xhr-fields = '{"withCredentials":true}' { % } % } >
< i class = "glyphicon glyphicon-trash" > < / i >
< span > Delete< / span >
< / button >
< input type = "checkbox" name = "delete" value = "1" class = "toggle" >
{% } else { %}
< button class = "btn btn-warning cancel" >
< i class = "glyphicon glyphicon-ban-circle" > < / i >
< span > Cancel< / span >
< / button >
{% } %}
< / td >
< / tr >
{% } %}
< / script >
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 Templates plugin is included to render the upload/download listings -->
2018-10-23 00:00:33 +00:00
< script src = "https://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js" > < / script >
2014-10-05 08:18:50 +00:00
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
2018-10-23 00:00:33 +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
<!-- blueimp Gallery script -->
2018-10-23 00:00:33 +00:00
< script src = "https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js" > < / 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 >
<!-- The File Upload user interface plugin -->
< script src = "js/jquery.fileupload-ui.js" > < / script >
<!-- The main application script -->
< script src = "js/main.js" > < / 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 >