dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
199 lines (189 loc) • 6.42 kB
HTML
<html lang="en">
<head>
<title>Test dojox.form.Uploader</title>
<link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/Common.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/form/Common.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/form/Button.css" rel="stylesheet" />
<link href="../resources/UploaderFileList.css" rel="stylesheet" />
<style>
@import "../../../dijit/tests/css/dijitTests.css";
html, body{
font-family:sans-serif;
}
.browseButton{
width:300px;
/*height:20px;*/
font-weight:bold;
margin:10px 0 2px 0;
}
.dijitTabPane{
padding:20px;
}
fieldset{
text-align:right;
padding: 5px;
}
input[type=text]{
width:135px;
}
.dijitButton{
margin-top:15px;
}
.dojoxUploaderFileList{
text-align:left;
margin-top:10px;
}
.pageTable{
width:100%;
}
.pageTable td{
vertical-align:top;
}
#colForm{
width:330px;
}
#colImages{
padding-top:7px;
}
.thumb{
border:1px solid #ccc;
padding:5px;
width:123px;
background:#eee;
float:left;
margin:0 5px 5px 0;
}
.thumbbk{
background:#fff;
display:block;
}
.thumb img{
border:1px solid #ccc;
width:120px;
}
.form, .html5, .iframe, .flash{
display:none;
}
.Form .form, .HTML5 .html5, .IFrame .iframe, .Flash .flash{
display:block;
}
#dialog p{
width:310px;
}
form{
margin-bottom:15px;
}
code{
font-family:monospace;
white-space:nowrap;
}
.browseButton, .browseButton .dijitButton, .browseButton .dijitButtonNode {
display:block;
}
.dijitUploadDisplayInput {
width:100px;
}
</style>
<script>
dojoConfig = {
async:1,
isDebug:true
}
</script>
<script src="../../../dojo/dojo.js"></script>
<script>
require([
'dojo/_base/connect',
'dojo/_base/array',
'dojo/dom',
'dojo/dom-construct',
'dijit/registry',
'dojo/parser',
'dojo/domReady!',
'dijit/form/Button',
'dojox/form/Uploader',
'dojox/form/uploader/FileList'
],
function(cn, arrayUtil, dom, domConst, registry, parser){
parser.parse();
var
uploader=registry.byId("uploader"),
uploader2=registry.byId("uploader2"),
handleUpload = function(upl, node){
cn.connect(upl, "onComplete", function(dataArray){
arrayUtil.forEach(dojo.isArray(dataArray)?dataArray:[dataArray], function(file){
console.log("display:", file)
var div = dojo.create('div', {className:'thumb'});
var span = dojo.create('span', {className:'thumbbk'}, div);
var img = dojo.create('img', {src:file.file}, span);
node.appendChild(div);
});
});
},
handleDnD = function(domnode, uploader){
if(uploader.addDropTarget && uploader.uploadType=='html5'){
domConst.create('div',{innerHTML:'Drag and Drop files to this fieldset'}, domnode,'last');
uploader.addDropTarget(domnode);
}
};
cn.connect(registry.byId("remBtn"), "onClick", uploader, "reset");
cn.connect(registry.byId("remBtn2"), "onClick", uploader2, "reset");
handleUpload(uploader, dom.byId('colImages'));
handleUpload(uploader2, dom.byId('colImages'));
if(require.has('file-multiple')){
handleDnD(uploader.domNode.parentNode, uploader);
handleDnD(uploader2.domNode.parentNode, uploader2);
}
});
</script>
</head>
<body class="claro">
<h1>Test dojox/form/Uploader</h1>
<p style="font-size:14px; border:2px solid #ff0000; padding:3px;">
<strong>NOTE:</strong> This test does upload,
but the server scripts are renamed to <code>tests/UploadFile.php.<strong>disabled</strong></code> and
<code>tests/cLOG.php.<strong>disabled</strong></code> to prevent security attacks on hosted servers.
You should rename these files (removing <code>.disabled</code>) in your local copy to conduct tests.
</p>
<p class="flash">
The Flash feature will use a SWF to upload in non-HTML5 browsers. All other browsers will use the HTML5 plugin,
unless <code>force="flash"</code> is used, then Flash will be used in all browsers. <code>force="flash"</code>
is provided because Flash has some features that HTML5 does not yet have. But it is still not
recommended because of the many problems that Firefox and Webkit have with the Flash plugin.
</p>
<p class="HTML5">When HTML5 feature is in use, drag & drop of files to the fieldset is supported.</p>
<table class="pageTable" role="presentation">
<tr>
<td id="colForm">
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<fieldset>
<legend>Block Browse Button Form Post Test</legend>
<input class="browseButton" data-dojo-props='name:"uploadedfile", multiple:true, force:"html5", label:"Select Some Files", isDebug:true, uploadOnSelect:true' type="file" data-dojo-type="dojox/form/Uploader" id="uploader"/>
<input type="text" name="album" value="Summer Vacation" aria-label="album" />
+ <input type="text" name="year" value="2011" aria-label="year" />
<input type="button" id="remBtn" label="Clear" data-dojo-type="dijit/form/Button" />
<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
<div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
</fieldset>
</form>
<form method="post" action="UploadFile.php" id="myForm2" enctype="multipart/form-data" >
<fieldset>
<legend>Inline Browse Button Form Post Test</legend>
inline control <div data-dojo-type="dojox/form/Uploader" id="uploader2" data-dojo-props="name:'uploadedfile',showInput:'before',isDebug:true">Browse</div>
<input type="text" name="album" value="Summer Vacation" aria-label="album" />
+ <input type="text" name="year" value="2011" aria-label="year" />
<input type="button" id="remBtn2" label="Clear" data-dojo-type="dijit/form/Button" />
<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
<div id="files2" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader2"'></div>
</fieldset>
</form>
</td>
<td id="colImages">
</td>
</tr>
</table>
<a href="./images/attach.png" target='_blank'>Link to test #15285</a>
</body>
</html>