Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 234 lines (233 sloc) 12.397 kb
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
1 <!DOCTYPE HTML>
2 <!--
3 /*
cc6e8cd @blueimp Updated modal footer button order for Bootstrap 2.0.2.
blueimp authored
4 * jQuery File Upload Plugin Demo 6.5.1
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
5 * https://github.com/blueimp/jQuery-File-Upload
6 *
7 * Copyright 2010, Sebastian Tschan
8 * https://blueimp.net
9 *
10 * Licensed under the MIT license:
ae2a8b8 @blueimp Updated license link and added package information.
blueimp authored
11 * http://www.opensource.org/licenses/MIT
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
12 */
13 -->
14 <html lang="en">
15 <head>
16 <meta charset="utf-8">
17 <title>jQuery File Upload Demo</title>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
18 <meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar and preview images 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.">
2c96684 @blueimp Set viewport width to device width.
blueimp authored
19 <meta name="viewport" content="width=device-width">
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
20 <!-- Bootstrap CSS Toolkit styles -->
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
21 <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
8936a91 @blueimp Added localization example.
blueimp authored
22 <!-- Generic page styles -->
23 <link rel="stylesheet" href="css/style.css">
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
24 <!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
25 <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
70b85ff @blueimp File input button CSS fixes for IE7+IE6.
blueimp authored
26 <!-- Bootstrap CSS fixes for IE6 -->
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
27 <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
28 <!-- Bootstrap Image Gallery styles -->
5f2eb2c @blueimp Updating the paths to the Bootstrap Image Gallery resources.
blueimp authored
29 <link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
30 <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
31 <link rel="stylesheet" href="css/jquery.fileupload-ui.css">
32 <!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
33 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
34 </head>
35 <body>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
36 <div class="navbar navbar-fixed-top">
37 <div class="navbar-inner">
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
38 <div class="container">
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
39 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
40 <span class="icon-bar"></span>
41 <span class="icon-bar"></span>
42 <span class="icon-bar"></span>
43 </a>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
44 <a class="brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
45 <div class="nav-collapse">
46 <ul class="nav">
47 <li class="active"><a href="#">Demo</a></li>
48 <li><a href="https://github.com/blueimp/jQuery-File-Upload/downloads">Downloads</a></li>
49 <li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
50 <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
51 <li><a href="https://github.com/blueimp/jQuery-File-Upload/issues">Issues</a></li>
52 <li><a href="test/">Test</a></li>
53 <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
54 </ul>
55 </div>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
56 </div>
57 </div>
58 </div>
59 <div class="container">
60 <div class="page-header">
61 <h1>jQuery File Upload Demo</h1>
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
62 </div>
57f986d @blueimp Moved cross-domain resources into a separate folder.
blueimp authored
63 <blockquote>
68fe2e4 @blueimp Updated features listing and package information.
blueimp authored
64 <p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars and preview images for jQuery.<br>
65 Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
66 Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
57f986d @blueimp Moved cross-domain resources into a separate folder.
blueimp authored
67 </blockquote>
68 <br>
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
69 <!-- The file upload form used as target for the file upload widget -->
70 <form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
71 <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
72 <div class="row fileupload-buttonbar">
16497bf @blueimp Give the buttons a larger span than the progress bar.
blueimp authored
73 <div class="span7">
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
74 <!-- The fileinput-button span is used to style the file input field as button -->
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
75 <span class="btn btn-success fileinput-button">
2c96684 @blueimp Set viewport width to device width.
blueimp authored
76 <i class="icon-plus icon-white"></i>
77 <span>Add files...</span>
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
78 <input type="file" name="files[]" multiple>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
79 </span>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
80 <button type="submit" class="btn btn-primary start">
2c96684 @blueimp Set viewport width to device width.
blueimp authored
81 <i class="icon-upload icon-white"></i>
82 <span>Start upload</span>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
83 </button>
84 <button type="reset" class="btn btn-warning cancel">
2c96684 @blueimp Set viewport width to device width.
blueimp authored
85 <i class="icon-ban-circle icon-white"></i>
86 <span>Cancel upload</span>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
87 </button>
88 <button type="button" class="btn btn-danger delete">
2c96684 @blueimp Set viewport width to device width.
blueimp authored
89 <i class="icon-trash icon-white"></i>
90 <span>Delete</span>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
91 </button>
c405ca8 @blueimp Added the postMessage transport plugin.
blueimp authored
92 <input type="checkbox" class="toggle">
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
93 </div>
16497bf @blueimp Give the buttons a larger span than the progress bar.
blueimp authored
94 <div class="span5">
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
95 <!-- The global progress bar -->
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
96 <div class="progress progress-success progress-striped active fade">
97 <div class="bar" style="width:0%;"></div>
98 </div>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
99 </div>
100 </div>
e39278b @blueimp Added automatic image resizing functionality.
blueimp authored
101 <!-- The loading indicator is shown during image processing -->
102 <div class="fileupload-loading"></div>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
103 <br>
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
104 <!-- The table listing the files available for upload/download -->
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
105 <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
106 </form>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
107 <br>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
108 <div class="well">
fb7bf41 @blueimp Added demo notes.
blueimp authored
109 <h3>Demo Notes</h3>
110 <ul>
bb5a302 @blueimp Updated demo notes.
blueimp authored
111 <li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
112 <li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
113 <li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
114 <li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
115 <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>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
116 <li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> toolkit and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
fb7bf41 @blueimp Added demo notes.
blueimp authored
117 </ul>
118 </div>
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
119 </div>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
120 <!-- modal-gallery is the modal dialog used for the image gallery -->
121 <div id="modal-gallery" class="modal modal-gallery hide fade">
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
122 <div class="modal-header">
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
123 <a class="close" data-dismiss="modal">&times;</a>
124 <h3 class="modal-title"></h3>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
125 </div>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
126 <div class="modal-body"><div class="modal-image"></div></div>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
127 <div class="modal-footer">
cc6e8cd @blueimp Updated modal footer button order for Bootstrap 2.0.2.
blueimp authored
128 <a class="btn modal-download" target="_blank">
129 <i class="icon-download"></i>
130 <span>Download</span>
2c96684 @blueimp Set viewport width to device width.
blueimp authored
131 </a>
132 <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
133 <i class="icon-play icon-white"></i>
134 <span>Slideshow</span>
135 </a>
cc6e8cd @blueimp Updated modal footer button order for Bootstrap 2.0.2.
blueimp authored
136 <a class="btn btn-info modal-prev">
137 <i class="icon-arrow-left icon-white"></i>
138 <span>Previous</span>
139 </a>
140 <a class="btn btn-primary modal-next">
141 <span>Next</span>
142 <i class="icon-arrow-right icon-white"></i>
2c96684 @blueimp Set viewport width to device width.
blueimp authored
143 </a>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
144 </div>
145 </div>
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
146 <!-- The template to display files available for upload -->
ea80aec @blueimp Use "text/x-tmpl" instead of "text/html" as type for the template script...
blueimp authored
147 <script id="template-upload" type="text/x-tmpl">
a9f5e12 @blueimp More concise loop code.
blueimp authored
148 {% for (var i=0, file; file=o.files[i]; i++) { %}
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
149 <tr class="template-upload fade">
1b335ec @blueimp Fix flickering when replacing the upload template with the download temp...
blueimp authored
150 <td class="preview"><span class="fade"></span></td>
2c96684 @blueimp Set viewport width to device width.
blueimp authored
151 <td class="name"><span>{%=file.name%}</span></td>
152 <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
153 {% if (file.error) { %}
8936a91 @blueimp Added localization example.
blueimp authored
154 <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
155 {% } else if (o.files.valid && !i) { %}
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
156 <td>
157 <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
158 </td>
159 <td class="start">{% if (!o.options.autoUpload) { %}
160 <button class="btn btn-primary">
2c96684 @blueimp Set viewport width to device width.
blueimp authored
161 <i class="icon-upload icon-white"></i>
162 <span>{%=locale.fileupload.start%}</span>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
163 </button>
164 {% } %}</td>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
165 {% } else { %}
166 <td colspan="2"></td>
167 {% } %}
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
168 <td class="cancel">{% if (!i) { %}
169 <button class="btn btn-warning">
2c96684 @blueimp Set viewport width to device width.
blueimp authored
170 <i class="icon-ban-circle icon-white"></i>
171 <span>{%=locale.fileupload.cancel%}</span>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
172 </button>
173 {% } %}</td>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
174 </tr>
175 {% } %}
1eeced6 @blueimp Replace jQuery Templates with a new JavaScript Templates engine:
blueimp authored
176 </script>
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
177 <!-- The template to display files available for download -->
ea80aec @blueimp Use "text/x-tmpl" instead of "text/html" as type for the template script...
blueimp authored
178 <script id="template-download" type="text/x-tmpl">
a9f5e12 @blueimp More concise loop code.
blueimp authored
179 {% for (var i=0, file; file=o.files[i]; i++) { %}
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
180 <tr class="template-download fade">
181 {% if (file.error) { %}
182 <td></td>
2c96684 @blueimp Set viewport width to device width.
blueimp authored
183 <td class="name"><span>{%=file.name%}</span></td>
184 <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
8936a91 @blueimp Added localization example.
blueimp authored
185 <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
186 {% } else { %}
187 <td class="preview">{% if (file.thumbnail_url) { %}
6e997bd @blueimp Added the HTML5 download attribute to the file download links.
blueimp authored
188 <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
189 {% } %}</td>
190 <td class="name">
6e997bd @blueimp Added the HTML5 download attribute to the file download links.
blueimp authored
191 <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
192 </td>
2c96684 @blueimp Set viewport width to device width.
blueimp authored
193 <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
194 <td colspan="2"></td>
195 {% } %}
196 <td class="delete">
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
197 <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
2c96684 @blueimp Set viewport width to device width.
blueimp authored
198 <i class="icon-trash icon-white"></i>
199 <span>{%=locale.fileupload.destroy%}</span>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
200 </button>
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
201 <input type="checkbox" name="delete" value="1">
202 </td>
203 </tr>
204 {% } %}
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
205 </script>
92dcc73 @blueimp Updated jQuery to version 1.7.1.
blueimp authored
206 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
57f986d @blueimp Moved cross-domain resources into a separate folder.
blueimp authored
207 <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
208 <script src="js/vendor/jquery.ui.widget.js"></script>
e39278b @blueimp Added automatic image resizing functionality.
blueimp authored
209 <!-- The Templates plugin is included to render the upload/download listings -->
721ef7f @blueimp New UI based on Twitter's Bootstrap toolkit.
blueimp authored
210 <script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
e39278b @blueimp Added automatic image resizing functionality.
blueimp authored
211 <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
b1e81c5 @blueimp Added the jQuery UI widget factory to the repository.
blueimp authored
212 <script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
e39278b @blueimp Added automatic image resizing functionality.
blueimp authored
213 <!-- The Canvas to Blob plugin is included for image resizing functionality -->
214 <script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
215 <!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
216 <script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
5f2eb2c @blueimp Updating the paths to the Bootstrap Image Gallery resources.
blueimp authored
217 <script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
57f986d @blueimp Moved cross-domain resources into a separate folder.
blueimp authored
218 <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
219 <script src="js/jquery.iframe-transport.js"></script>
220 <!-- The basic File Upload plugin -->
221 <script src="js/jquery.fileupload.js"></script>
e39278b @blueimp Added automatic image resizing functionality.
blueimp authored
222 <!-- The File Upload image processing plugin -->
223 <script src="js/jquery.fileupload-ip.js"></script>
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
224 <!-- The File Upload user interface plugin -->
225 <script src="js/jquery.fileupload-ui.js"></script>
8936a91 @blueimp Added localization example.
blueimp authored
226 <!-- The localization script -->
227 <script src="js/locale.js"></script>
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
228 <!-- The main application script -->
229 <script src="js/main.js"></script>
57f986d @blueimp Moved cross-domain resources into a separate folder.
blueimp authored
230 <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
67969d4 @blueimp Reorganizing the plugin files into folders.
blueimp authored
231 <!--[if gte IE 8]><script src="js/cors/jquery.xdr-transport.js"></script><![endif]-->
97aa5b6 @blueimp Added Google App Engine implementation (Python).
blueimp authored
232 </body>
f6c5358 @blueimp Updated User Interface for Bootstrap 2.0.
blueimp authored
233 </html>
Something went wrong with that request. Please try again.