| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | <!DOCTYPE HTML> |
| A | 2 | <!-- |
| 3 | /* | |
| 4 | * jQuery File Upload Plugin AngularJS Demo 2.1.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]> | |
| 18 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| 19 | <![endif]--> | |
| 20 | <meta charset="utf-8"> | |
| 21 | <title>jQuery File Upload Demo - AngularJS version</title> | |
| 22 | <meta name="description" content="File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for AngularJS. 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."> | |
| 23 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 24 | <!-- Bootstrap styles --> | |
| 25 | <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> | |
| 26 | <!-- Generic page styles --> | |
| 27 | <link rel="stylesheet" href="css/style.css"> | |
| 28 | <!-- blueimp Gallery styles --> | |
| 29 | <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css"> | |
| 30 | <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --> | |
| 31 | <link rel="stylesheet" href="css/jquery.fileupload.css"> | |
| 32 | <link rel="stylesheet" href="css/jquery.fileupload-ui.css"> | |
| 33 | <!-- CSS adjustments for browsers with JavaScript disabled --> | |
| 34 | <noscript><link rel="stylesheet" href="css/jquery.fileupload-noscript.css"></noscript> | |
| 35 | <noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript> | |
| 36 | <style> | |
| 37 | /* Hide Angular JS elements before initializing */ | |
| 38 | .ng-cloak { | |
| 39 | display: none; | |
| 40 | } | |
| 41 | </style> | |
| 42 | </head> | |
| 43 | <body> | |
| 44 | <div class="navbar navbar-default navbar-fixed-top"> | |
| 45 | <div class="container"> | |
| 46 | <div class="navbar-header"> | |
| 47 | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse"> | |
| 48 | <span class="icon-bar"></span> | |
| 49 | <span class="icon-bar"></span> | |
| 50 | <span class="icon-bar"></span> | |
| 51 | </button> | |
| 52 | <a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a> | |
| 53 | </div> | |
| 54 | <div class="navbar-collapse collapse"> | |
| 55 | <ul class="nav navbar-nav"> | |
| 56 | <li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li> | |
| 57 | <li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li> | |
| 58 | <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li> | |
| 59 | <li><a href="https://blueimp.net">© Sebastian Tschan</a></li> | |
| 60 | </ul> | |
| 61 | </div> | |
| 62 | </div> | |
| 63 | </div> | |
| 64 | <div class="container"> | |
| 65 | <h1>jQuery File Upload Demo</h1> | |
| 66 | <h2 class="lead">AngularJS version</h2> | |
| 67 | <ul class="nav nav-tabs"> | |
| 68 | <li><a href="basic.html">Basic</a></li> | |
| 69 | <li><a href="basic-plus.html">Basic Plus</a></li> | |
| 70 | <li><a href="index.html">Basic Plus UI</a></li> | |
| 71 | <li class="active"><a href="angularjs.html">AngularJS</a></li> | |
| 72 | <li><a href="jquery-ui.html">jQuery UI</a></li> | |
| 73 | </ul> | |
| 74 | <br> | |
| 75 | <blockquote> | |
| 76 | <p>File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for AngularJS.<br> | |
| 77 | Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br> | |
| 78 | Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p> | |
| 79 | </blockquote> | |
| 80 | <br> | |
| 81 | <!-- The file upload form used as target for the file upload widget --> | |
| 82 | <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}"> | |
| 83 | <!-- Redirect browsers with JavaScript disabled to the origin page --> | |
| 84 | <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript> | |
| 85 | <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> | |
| 86 | <div class="row fileupload-buttonbar"> | |
| 87 | <div class="col-lg-7"> | |
| 88 | <!-- The fileinput-button span is used to style the file input field as button --> | |
| 89 | <span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}"> | |
| 90 | <i class="glyphicon glyphicon-plus"></i> | |
| 91 | <span>Add files...</span> | |
| 92 | <input type="file" name="files[]" multiple ng-disabled="disabled"> | |
| 93 | </span> | |
| 94 | <button type="button" class="btn btn-primary start" data-ng-click="submit()"> | |
| 95 | <i class="glyphicon glyphicon-upload"></i> | |
| 96 | <span>Start upload</span> | |
| 97 | </button> | |
| 98 | <button type="button" class="btn btn-warning cancel" data-ng-click="cancel()"> | |
| 99 | <i class="glyphicon glyphicon-ban-circle"></i> | |
| 100 | <span>Cancel upload</span> | |
| 101 | </button> | |
| 102 | <!-- The global file processing state --> | |
| 103 | <span class="fileupload-process"></span> | |
| 104 | </div> | |
| 105 | <!-- The global progress state --> | |
| 106 | <div class="col-lg-5 fade" data-ng-class="{in: active()}"> | |
| 107 | <!-- The global progress bar --> | |
| 108 | <div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div> | |
| 109 | <!-- The extended global progress state --> | |
| 110 | <div class="progress-extended"> </div> | |
| 111 | </div> | |
| 112 | </div> | |
| 113 | <!-- The table listing the files available for upload/download --> | |
| 114 | <table class="table table-striped files ng-cloak"> | |
| 115 | <tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}"> | |
| 116 | <td data-ng-switch data-on="!!file.thumbnailUrl"> | |
| 117 | <div class="preview" data-ng-switch-when="true"> | |
| 118 | <a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a> | |
| 119 | </div> | |
| 120 | <div class="preview" data-ng-switch-default data-file-upload-preview="file"></div> | |
| 121 | </td> | |
| 122 | <td> | |
| 123 | <p class="name" data-ng-switch data-on="!!file.url"> | |
| 124 | <span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl"> | |
| 125 | <a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a> | |
| 126 | <a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a> | |
| 127 | </span> | |
| 128 | <span data-ng-switch-default>{{file.name}}</span> | |
| 129 | </p> | |
| 130 | <strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong> | |
| 131 | </td> | |
| 132 | <td> | |
| 133 | <p class="size">{{file.size | formatFileSize}}</p> | |
| 134 | <div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div> | |
| 135 | </td> | |
| 136 | <td> | |
| 137 | <button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'"> | |
| 138 | <i class="glyphicon glyphicon-upload"></i> | |
| 139 | <span>Start</span> | |
| 140 | </button> | |
| 141 | <button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel"> | |
| 142 | <i class="glyphicon glyphicon-ban-circle"></i> | |
| 143 | <span>Cancel</span> | |
| 144 | </button> | |
| 145 | <button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy"> | |
| 146 | <i class="glyphicon glyphicon-trash"></i> | |
| 147 | <span>Delete</span> | |
| 148 | </button> | |
| 149 | </td> | |
| 150 | </tr> | |
| 151 | </table> | |
| 152 | </form> | |
| 153 | <br> | |
| 154 | <div class="panel panel-default"> | |
| 155 | <div class="panel-heading"> | |
| 156 | <h3 class="panel-title">Demo Notes</h3> | |
| 157 | </div> | |
| 158 | <div class="panel-body"> | |
| 159 | <ul> | |
| 160 | <li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li> | |
| 161 | <li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li> | |
| 162 | <li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li> | |
| 163 | <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> | |
| 164 | <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> | |
| 165 | <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> | |
| 166 | </ul> | |
| 167 | </div> | |
| 168 | </div> | |
| 169 | </div> | |
| 170 | <!-- The blueimp Gallery widget --> | |
| 171 | <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even"> | |
| 172 | <div class="slides"></div> | |
| 173 | <h3 class="title"></h3> | |
| 174 | <a class="prev">‹</a> | |
| 175 | <a class="next">›</a> | |
| 176 | <a class="close">×</a> | |
| 177 | <a class="play-pause"></a> | |
| 178 | <ol class="indicator"></ol> | |
| 179 | </div> | |
| 180 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| 181 | <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> | |
| 182 | <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> | |
| 183 | <script src="js/vendor/jquery.ui.widget.js"></script> | |
| 184 | <!-- The Load Image plugin is included for the preview images and image resizing functionality --> | |
| 185 | <script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js"></script> | |
| 186 | <!-- The Canvas to Blob plugin is included for image resizing functionality --> | |
| 187 | <script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script> | |
| 188 | <!-- Bootstrap JS is not required, but included for the responsive demo navigation --> | |
| 189 | <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> | |
| 190 | <!-- blueimp Gallery script --> | |
| 191 | <script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> | |
| 192 | <!-- The Iframe Transport is required for browsers without support for XHR file uploads --> | |
| 193 | <script src="js/jquery.iframe-transport.js"></script> | |
| 194 | <!-- The basic File Upload plugin --> | |
| 195 | <script src="js/jquery.fileupload.js"></script> | |
| 196 | <!-- The File Upload processing plugin --> | |
| 197 | <script src="js/jquery.fileupload-process.js"></script> | |
| 198 | <!-- The File Upload image preview & resize plugin --> | |
| 199 | <script src="js/jquery.fileupload-image.js"></script> | |
| 200 | <!-- The File Upload audio preview plugin --> | |
| 201 | <script src="js/jquery.fileupload-audio.js"></script> | |
| 202 | <!-- The File Upload video preview plugin --> | |
| 203 | <script src="js/jquery.fileupload-video.js"></script> | |
| 204 | <!-- The File Upload validation plugin --> | |
| 205 | <script src="js/jquery.fileupload-validate.js"></script> | |
| 206 | <!-- The File Upload Angular JS module --> | |
| 207 | <script src="js/jquery.fileupload-angular.js"></script> | |
| 208 | <!-- The main application script --> | |
| 209 | <script src="js/app.js"></script> | |
| 210 | </body> | |
| 211 | </html> | |
