查看 | 历史 | 提交 | 提交对比
Administrator
2022-09-14 58d006e05dcf2a20d0ec5367dd03d66a61db6849
提交 | 用户 | 时间
58d006 1 <!DOCTYPE HTML>
A 2 <!--
3 /*
4  * jQuery File Upload Plugin Basic Demo 1.2.2
5  * https://github.com/blueimp/jQuery-File-Upload
6  *
7  * Copyright 2013, Sebastian Tschan
8  * https://blueimp.net
9  *
10  * Licensed under the MIT license:
11  * http://www.opensource.org/licenses/MIT
12  */
13 -->
14 <html lang="en">
15 <head>
16 <!-- Force latest IE rendering engine or ChromeFrame if installed -->
17 <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
18 <meta charset="utf-8">
19 <title>jQuery File Upload Demo - Basic version</title>
20 <meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
21 <meta name="viewport" content="width=device-width, initial-scale=1.0">
22 <!-- Bootstrap styles -->
23 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
24 <!-- Generic page styles -->
25 <link rel="stylesheet" href="css/style.css">
26 <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
27 <link rel="stylesheet" href="css/jquery.fileupload-ui.css">
28 </head>
29 <body>
30 <div class="navbar navbar-default navbar-fixed-top">
31     <div class="container">
32         <div class="navbar-header">
33             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse">
34                 <span class="icon-bar"></span>
35                 <span class="icon-bar"></span>
36                 <span class="icon-bar"></span>
37             </button>
38             <a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
39         </div>
40         <div class="navbar-collapse collapse">
41             <ul class="nav navbar-nav">
42                 <li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li>
43                 <li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
44                 <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
45                 <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
46             </ul>
47         </div>
48     </div>
49 </div>
50 <div class="container">
51     <h1>jQuery File Upload Demo</h1>
52     <h2 class="lead">Basic version</h2>
53     <ul class="nav nav-tabs">
54         <li class="active"><a href="basic.html">Basic</a></li>
55         <li><a href="basic-plus.html">Basic Plus</a></li>
56         <li><a href="index.html">Basic Plus UI</a></li>
57         <li><a href="angularjs.html">AngularJS</a></li>
58         <li><a href="jquery-ui.html">jQuery UI</a></li>
59     </ul>
60     <br>
61     <blockquote>
62         <p>File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery.<br>
63         Supports cross-domain, chunked and resumable file uploads.<br>
64         Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
65     </blockquote>
66     <br>
67     <!-- The fileinput-button span is used to style the file input field as button -->
68     <span class="btn btn-success fileinput-button">
69         <i class="glyphicon glyphicon-plus"></i>
70         <span>Select files...</span>
71         <!-- The file input field used as target for the file upload widget -->
72         <input id="fileupload" type="file" name="files[]" multiple>
73     </span>
74     <br>
75     <br>
76     <!-- The global progress bar -->
77     <div id="progress" class="progress">
78         <div class="progress-bar progress-bar-success"></div>
79     </div>
80     <!-- The container for the uploaded files -->
81     <div id="files" class="files"></div>
82     <br>
83     <div class="panel panel-default">
84         <div class="panel-heading">
85             <h3 class="panel-title">Demo Notes</h3>
86         </div>
87         <div class="panel-body">
88             <ul>
89                 <li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
90                 <li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
91                 <li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
92                 <li>You can <strong>drag &amp; 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>
93                 <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>
94                 <li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
95             </ul>
96         </div>
97     </div>
98 </div>
99 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
100 <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
101 <script src="js/vendor/jquery.ui.widget.js"></script>
102 <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
103 <script src="js/jquery.iframe-transport.js"></script>
104 <!-- The basic File Upload plugin -->
105 <script src="js/jquery.fileupload.js"></script>
106 <!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
107 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
108 <script>
109 /*jslint unparam: true */
110 /*global window, $ */
111 $(function () {
112     'use strict';
113     // Change this to the location of your server-side upload handler:
114     var url = window.location.hostname === 'blueimp.github.io' ?
115                 '//jquery-file-upload.appspot.com/' : 'server/php/';
116     $('#fileupload').fileupload({
117         url: url,
118         dataType: 'json',
119         done: function (e, data) {
120             $.each(data.result.files, function (index, file) {
121                 $('<p/>').text(file.name).appendTo('#files');
122             });
123         },
124         progressall: function (e, data) {
125             var progress = parseInt(data.loaded / data.total * 100, 10);
126             $('#progress .progress-bar').css(
127                 'width',
128                 progress + '%'
129             );
130         }
131     }).prop('disabled', !$.support.fileInput)
132         .parent().addClass($.support.fileInput ? undefined : 'disabled');
133 });
134 </script>
135 </body> 
136 </html>