/
Uploader.html
150 lines (132 loc) · 8.72 KB
/
Uploader.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Uploader Template</title>
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../css/Uploader.css" />
<!-- Fluid and jQuery Dependencies -->
<script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="../../../lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="../../../lib/swfobject/js/swfobject.js"></script>
<script type="text/javascript" src="../../../lib/swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="../../../framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="../../../framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../../framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="../../../framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="../../../framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="../../../framework/enhancement/js/ProgressiveEnhancement.js"></script>
<!-- Uploader dependencies -->
<script type="text/javascript" src="../js/Uploader.js"></script>
<script type="text/javascript" src="../js/FileQueue.js"></script>
<script type="text/javascript" src="../../progress/js/Progress.js"></script>
<script type="text/javascript" src="../js/FileQueueView.js"></script>
<script type="text/javascript" src="../js/ErrorPanel.js"></script>
<script type="text/javascript" src="../js/FlashUploaderSupport.js"></script>
<script type="text/javascript" src="../js/Flash9UploaderSupport.js"></script>
<script type="text/javascript" src="../js/HTML5UploaderSupport.js"></script>
<script type="text/javascript" src="../js/DemoUploadManager.js"></script>
<script type="text/javascript" src="../js/MimeTypeExtensions.js"></script>
</head>
<body>
<!-- Basic upload controls, used when JavaScript is unavailable -->
<form method="post" enctype="multipart/form-data" class="fl-progEnhance-basic">
<p>Use the Browse button to add a file, and the Save button to upload it.</p>
<input name="fileData" type="file" />
<input class="fl-uploader-basic-save" type="submit" value="Save"/>
</form>
<!-- Uploader container -->
<form class="flc-uploader fl-uploader fl-progEnhance-enhanced" method="get" enctype="multipart/form-data">
<!-- File Queue, which is split up into two separate tables: one for the header and body -->
<table class="fl-uploader-header">
<tr>
<th class="fl-uploader-file-name">File Name</th>
<th class="fl-uploader-file-size">Size</th>
<th class="fl-uploader-file-actions"></th>
</tr>
</table>
<!-- File Queue body, which is the default container for the FileQueueView component -->
<table summary="The list of files" class="flc-uploader-queue fl-uploader-queue">
<caption>File Upload Queue:</caption>
<tbody>
<!-- Template for file row -->
<tr class="flc-uploader-file-tmplt flc-uploader-file">
<td class="flc-uploader-file-name fl-uploader-file-name">File Name Placeholder</td>
<td class="flc-uploader-file-size fl-uploader-file-size">0 KB</td>
<td class="fl-uploader-file-actions">
<button type="button" class="flc-uploader-file-action" tabindex="-1"></button>
</td>
</tr>
<!-- Template for error info row -->
<tr class="flc-uploader-file-error-tmplt fl-uploader-file-error">
<td colspan="3" class="flc-uploader-file-error"></td>
</tr>
</tbody>
</table>
<!-- File progress bar template, used to generate progress bars for each file in the queue -->
<div class="flc-uploader-file-progressor-tmplt fl-uploader-file-progress"></div>
<!-- Initial instructions -->
<div class="flc-uploader-browse-instructions fl-uploader-browse-instructions">
Choose <em>Browse files</em> to add files to the queue.
</div>
<!-- Status footer -->
<div class="flc-uploader-queue-footer fl-uploader-queue-footer fl-clearfix">
<div class="fl-force-left">
<div class="flc-uploader-total-progress-text fl-uploader-total-progress-text">
Total: 0 files (0 KB)
</div>
<div class="flc-uploader-upload-limit-text"></div>
</div>
<div class="fl-text-align-right fl-force-right">
<span class="flc-uploader-button-browse fl-uploader-browse">
<span class="flc-uploader-button-browse-text">Browse files</span>
</span>
</div>
<!-- Total progress bar -->
<div class="flc-uploader-total-progress fl-uploader-total-progress-okay"></div>
<div class="flc-uploader-errorsPanel fl-uploader-errorsPanel">
<div class="fl-uploader-errorsPanel-header"><span class="flc-uploader-errorPanel-header">Warnings:</span></div>
<!-- The markup for each error section will be rendered into these containers. -->
<div class="flc-uploader-errorPanel-section-fileSize"></div>
<div class="flc-uploader-errorPanel-section-numFiles"></div>
<!-- Error section template.-->
<div class="flc-uploader-errorPanel-section-tmplt fl-uploader-hidden-templates">
<div class="fl-container-flex">
<div class="flc-uploader-errorPanel-section-title fl-uploader-errorPanel-section-title fl-force-left">
x files were too y and were not added to the queue.
</div>
<button type="button" class="flc-uploader-errorPanel-section-removeButton fl-uploader-errorPanel-section-removeButton fl-force-right">
<span class="flc-uploader-erroredButton-text fl-uploader-hidden">Remove error</span>
</button>
</div>
<div class="fl-container-flex">
<div class="flc-uploader-errorPanel-section-details fl-uploader-errorPanel-section-details">
<p>The following files were not added:</p>
<p class="flc-uploader-errorPanel-section-files">file_1, file_2, file_3, file_4, file_5 </p>
</div>
</div>
<div class="fl-container-flex">
<button type="button" class="flc-uploader-errorPanel-section-toggleDetails fl-uploader-errorPanel-section-toggleDetails">Hide this list</button>
</div>
</div>
</div>
</div>
<!-- Upload buttons -->
<div class="fl-uploader-buttons">
<button type="button" class="flc-uploader-button-pause fl-uploader-button-stop fl-uploader-hidden">Stop Upload</button>
<button type="button" class="flc-uploader-button-upload fl-uploader-button-upload fl-uploader-dim">Upload</button>
</div>
<div class="flc-uploader-status-region fl-offScreen-hidden"></div>
</form>
<script type="text/javascript">
var myUploader = fluid.uploader(".flc-uploader", {
demo: true
});
</script>
</body>
</html>