查看 | 历史 | 提交 | 提交对比
hjg
2024-07-09 30304784e82d4bba24121328da8eb8490aec4f4f
提交 | 用户 | 时间
58d006 1 <!DOCTYPE HTML>
A 2 <!--
3 /*
4  * jQuery File Upload Plugin Basic Plus Demo 1.3.5
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 Plus version</title>
20 <meta name="description" content="File Upload widget with multiple file selection, drag&amp;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.">
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.3/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.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 Plus version</h2>
53     <ul class="nav nav-tabs">
54         <li><a href="basic.html">Basic</a></li>
55         <li class="active"><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, progress bar, validation and preview images, audio and video for jQuery.<br>
63         Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<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>Add 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 Load Image plugin is included for the preview images and image resizing functionality -->
103 <script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js"></script>
104 <!-- The Canvas to Blob plugin is included for image resizing functionality -->
105 <script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
106 <!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
107 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
108 <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
109 <script src="js/jquery.iframe-transport.js"></script>
110 <!-- The basic File Upload plugin -->
111 <script src="js/jquery.fileupload.js"></script>
112 <!-- The File Upload processing plugin -->
113 <script src="js/jquery.fileupload-process.js"></script>
114 <!-- The File Upload image preview & resize plugin -->
115 <script src="js/jquery.fileupload-image.js"></script>
116 <!-- The File Upload audio preview plugin -->
117 <script src="js/jquery.fileupload-audio.js"></script>
118 <!-- The File Upload video preview plugin -->
119 <script src="js/jquery.fileupload-video.js"></script>
120 <!-- The File Upload validation plugin -->
121 <script src="js/jquery.fileupload-validate.js"></script>
122 <script>
123 /*jslint unparam: true, regexp: true */
124 /*global window, $ */
125 $(function () {
126     'use strict';
127     // Change this to the location of your server-side upload handler:
128     var url = window.location.hostname === 'blueimp.github.io' ?
129                 '//jquery-file-upload.appspot.com/' : 'server/php/',
130         uploadButton = $('<button/>')
131             .addClass('btn btn-primary')
132             .prop('disabled', true)
133             .text('Processing...')
134             .on('click', function () {
135                 var $this = $(this),
136                     data = $this.data();
137                 $this
138                     .off('click')
139                     .text('Abort')
140                     .on('click', function () {
141                         $this.remove();
142                         data.abort();
143                     });
144                 data.submit().always(function () {
145                     $this.remove();
146                 });
147             });
148     $('#fileupload').fileupload({
149         url: url,
150         dataType: 'json',
151         autoUpload: false,
152         acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
153         maxFileSize: 5000000, // 5 MB
154         // Enable image resizing, except for Android and Opera,
155         // which actually support image resizing, but fail to
156         // send Blob objects via XHR requests:
157         disableImageResize: /Android(?!.*Chrome)|Opera/
158             .test(window.navigator.userAgent),
159         previewMaxWidth: 100,
160         previewMaxHeight: 100,
161         previewCrop: true
162     }).on('fileuploadadd', function (e, data) {
163         data.context = $('<div/>').appendTo('#files');
164         $.each(data.files, function (index, file) {
165             var node = $('<p/>')
166                     .append($('<span/>').text(file.name));
167             if (!index) {
168                 node
169                     .append('<br>')
170                     .append(uploadButton.clone(true).data(data));
171             }
172             node.appendTo(data.context);
173         });
174     }).on('fileuploadprocessalways', function (e, data) {
175         var index = data.index,
176             file = data.files[index],
177             node = $(data.context.children()[index]);
178         if (file.preview) {
179             node
180                 .prepend('<br>')
181                 .prepend(file.preview);
182         }
183         if (file.error) {
184             node
185                 .append('<br>')
186                 .append($('<span class="text-danger"/>').text(file.error));
187         }
188         if (index + 1 === data.files.length) {
189             data.context.find('button')
190                 .text('Upload')
191                 .prop('disabled', !!data.files.error);
192         }
193     }).on('fileuploadprogressall', function (e, data) {
194         var progress = parseInt(data.loaded / data.total * 100, 10);
195         $('#progress .progress-bar').css(
196             'width',
197             progress + '%'
198         );
199     }).on('fileuploaddone', function (e, data) {
200         $.each(data.result.files, function (index, file) {
201             if (file.url) {
202                 var link = $('<a>')
203                     .attr('target', '_blank')
204                     .prop('href', file.url);
205                 $(data.context.children()[index])
206                     .wrap(link);
207             } else if (file.error) {
208                 var error = $('<span class="text-danger"/>').text(file.error);
209                 $(data.context.children()[index])
210                     .append('<br>')
211                     .append(error);
212             }
213         });
214     }).on('fileuploadfail', function (e, data) {
215         $.each(data.files, function (index, file) {
216             var error = $('<span class="text-danger"/>').text('File upload failed.');
217             $(data.context.children()[index])
218                 .append('<br>')
219                 .append(error);
220         });
221     }).prop('disabled', !$.support.fileInput)
222         .parent().addClass($.support.fileInput ? undefined : 'disabled');
223 });
224 </script>
225 </body> 
226 </html>