You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
198 lines
6.3 KiB
198 lines
6.3 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<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>
|
|
|