source: Dev/trunk/src/client/dojox/form/tests/test_Uploader.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 6.3 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html lang="en">
3<head>
4    <title>Test dojox.form.Uploader</title>
5        <link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
6        <link href="../../../dijit/themes/claro/Common.css" rel="stylesheet" />
7        <link href="../../../dijit/themes/claro/form/Common.css" rel="stylesheet" />
8        <link href="../../../dijit/themes/claro/form/Button.css" rel="stylesheet" />
9
10        <link href="../resources/UploaderFileList.css" rel="stylesheet" />
11        <style>
12                @import "../../../dijit/tests/css/dijitTests.css";
13                html, body{
14                        font-family:sans-serif;
15                }
16                .browseButton{
17                        width:300px;
18                        /*height:20px;*/
19                        font-weight:bold;
20                        margin:10px 0 2px 0;
21                }
22                .dijitTabPane{
23                        padding:20px;
24                }
25                fieldset{
26                        text-align:right;
27                        padding: 5px;
28                }
29                input[type=text]{
30                        width:135px;
31                }
32                .dijitButton{
33                        margin-top:15px;
34                }
35                .dojoxUploaderFileList{
36                        text-align:left;
37                        margin-top:10px;
38                }
39                .pageTable{
40                        width:100%;
41                }
42                .pageTable td{
43                        vertical-align:top;
44                }
45                #colForm{
46                        width:330px;
47                }
48                #colImages{
49                        padding-top:7px;
50                }
51                .thumb{
52                        border:1px solid #ccc;
53                        padding:5px;
54                        width:123px;
55                        background:#eee;
56                        float:left;
57                        margin:0 5px 5px 0;
58                }
59                .thumbbk{
60                        background:#fff;
61                        display:block;
62                }
63                .thumb img{
64                        border:1px solid #ccc;
65                        width:120px;
66                }
67                .form, .html5, .iframe, .flash{
68                        display:none;
69                }
70                .Form .form, .HTML5 .html5, .IFrame .iframe, .Flash .flash{
71                        display:block;
72                }
73                #dialog p{
74                        width:310px;
75                }
76                form{
77                        margin-bottom:15px;
78                }
79                code{
80                        font-family:monospace;
81                        white-space:nowrap;
82                }
83                .browseButton, .browseButton .dijitButton, .browseButton .dijitButtonNode {
84                        display:block;
85                }
86                .dijitUploadDisplayInput {
87                        width:100px;
88                }
89        </style>
90        <script>
91                dojoConfig = {
92                        async:1,
93                        isDebug:true
94                }
95        </script>
96        <script src="../../../dojo/dojo.js"></script>
97        <script>
98                require([
99                        'dojo/_base/connect',
100                        'dojo/_base/array',
101                        'dojo/dom',
102                        'dojo/dom-construct',
103                        'dijit/registry',
104                        'dojo/parser',
105                        'dojo/domReady!',
106                        'dijit/form/Button',
107                        'dojox/form/Uploader',
108                        'dojox/form/uploader/FileList'
109                ],
110                function(cn, arrayUtil, dom, domConst, registry, parser){
111
112                        parser.parse();
113
114                        var
115                                uploader=registry.byId("uploader"),
116                                uploader2=registry.byId("uploader2"),
117                               
118                                handleUpload = function(upl, node){
119                                        cn.connect(upl, "onComplete", function(dataArray){
120                                                arrayUtil.forEach(dojo.isArray(dataArray)?dataArray:[dataArray], function(file){
121                                                        console.log("display:", file)
122       
123                                                        var div = dojo.create('div', {className:'thumb'});
124                                                        var span = dojo.create('span', {className:'thumbbk'}, div);
125                                                        var img = dojo.create('img', {src:file.file}, span);
126                                                        node.appendChild(div);
127                                                });
128                                        });
129                                },
130                                handleDnD = function(domnode, uploader){
131                                        if(uploader.addDropTarget && uploader.uploadType=='html5'){
132                                                domConst.create('div',{innerHTML:'Drag and Drop files to this fieldset'}, domnode,'last');
133                                                uploader.addDropTarget(domnode);
134                                        }
135                                };
136                       
137                        cn.connect(registry.byId("remBtn"), "onClick", uploader, "reset");
138                        cn.connect(registry.byId("remBtn2"), "onClick", uploader2, "reset");
139                        handleUpload(uploader, dom.byId('colImages'));
140                        handleUpload(uploader2, dom.byId('colImages'));
141                        if(require.has('file-multiple')){
142                                handleDnD(uploader.domNode.parentNode, uploader);
143                                handleDnD(uploader2.domNode.parentNode, uploader2);
144                        }
145                });
146
147
148        </script>
149</head>
150<body class="claro">
151    <h1>Test dojox/form/Uploader</h1>
152        <p style="font-size:14px; border:2px solid #ff0000; padding:3px;">
153                <strong>NOTE:</strong> This test does upload,
154                but the server scripts are renamed to <code>tests/UploadFile.php.<strong>disabled</strong></code> and
155                <code>tests/cLOG.php.<strong>disabled</strong></code> to prevent security attacks on hosted servers.
156                You should rename these files (removing <code>.disabled</code>) in your local copy to conduct tests.
157        </p>
158        <p class="flash">
159                The Flash feature will use a SWF to upload in non-HTML5 browsers. All other browsers will use the HTML5 plugin,
160                unless <code>force="flash"</code> is used, then Flash will be used in all browsers. <code>force="flash"</code>
161                is provided because Flash has some features that HTML5 does not yet have. But it is still not
162                recommended because of the many problems that Firefox and Webkit have with the Flash plugin.
163        </p>
164        <p class="HTML5">When HTML5 feature is in use, drag &amp; drop of files to the fieldset is supported.</p>
165
166        <table class="pageTable" role="presentation">
167                <tr>
168                        <td id="colForm">
169                                <form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
170                                        <fieldset>
171                                                <legend>Block Browse Button Form Post Test</legend>
172                                                <input class="browseButton" data-dojo-props='name:"uploadedfile", multiple:true, force:"html5", label:"Select Some Files", isDebug:true' type="file" data-dojo-type="dojox/form/Uploader" id="uploader"/>
173                                                <input type="text" name="album" value="Summer Vacation" aria-label="album" />
174+                                               <input type="text" name="year" value="2011" aria-label="year" />
175                                                <input type="button" id="remBtn" label="Clear" data-dojo-type="dijit/form/Button" />
176                                                <input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
177                                                <div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
178                                        </fieldset>
179                                </form>
180                                <form method="post" action="UploadFile.php" id="myForm2" enctype="multipart/form-data" >
181                                        <fieldset>
182                                                <legend>Inline Browse Button Form Post Test</legend>
183                                                inline control <div data-dojo-type="dojox/form/Uploader" id="uploader2" data-dojo-props="name:'uploadedfile',showInput:'before',isDebug:true">Browse</div>
184                                                <input type="text" name="album" value="Summer Vacation" aria-label="album" />
185+                                               <input type="text" name="year" value="2011" aria-label="year" />
186                                                <input type="button" id="remBtn2" label="Clear" data-dojo-type="dijit/form/Button" />
187                                                <input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
188                                                <div id="files2" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader2"'></div>
189                                        </fieldset>
190                                </form>
191                        </td>
192                        <td id="colImages">
193                        </td>
194                </tr>
195        </table>
196        <a href="./images/attach.png" target='_blank'>Link to test #15285</a>
197</body>
198</html>
Note: See TracBrowser for help on using the repository browser.