184 lines
6.0 KiB
HTML
184 lines
6.0 KiB
HTML
<!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>
|
|
djConfig = {
|
|
parseOnLoad:true,
|
|
isDebug:true
|
|
}
|
|
</script>
|
|
<script src="../../../dojo/dojo.js"></script>
|
|
<script>
|
|
dojo.require("dojo.parser");
|
|
dojo.require("dojox.form.Uploader");
|
|
dojo.require("dojox.form.uploader.FileList");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dojox.form.uploader.plugins.Flash");
|
|
|
|
var handleUpload = function(upl, node){
|
|
dojo.connect(upl, "onComplete", function(dataArray){
|
|
dojo.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'){
|
|
dojo.create('div',{innerHTML:'Drag and Drop files to this fieldset'}, domnode,'last');
|
|
uploader.addDropTarget(domnode);
|
|
}
|
|
}
|
|
|
|
dojo.addOnLoad(function(){
|
|
var uploader=dijit.byId("uploader"), uploader2=dijit.byId("uploader2");
|
|
dojo.connect(dijit.byId("remBtn"), "onClick", uploader, "reset");
|
|
dojo.connect(dijit.byId("remBtn2"), "onClick", uploader2, "reset");
|
|
handleUpload(uploader, dojo.byId('colImages'));
|
|
handleUpload(uploader2, dojo.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 plugin 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 plugin is in use, drag & drop of files to the fieldset is supported.</p>
|
|
|
|
<table class="pageTable">
|
|
<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" name="uploadedfile" multiple="true" type="file" dojoType="dojox.form.Uploader" label="Select Some Files" isDebug="true" id="uploader" />
|
|
<input type="text" name="album" value="Summer Vacation" />
|
|
<input type="text" name="year" value="2011" />
|
|
<input type="button" id="remBtn" label="Clear" dojoType="dijit.form.Button" />
|
|
<input type="submit" label="Submit" dojoType="dijit.form.Button" />
|
|
<div id="files" dojoType="dojox.form.uploader.FileList" 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" />
|
|
<input type="text" name="year" value="2011" />
|
|
<input type="button" id="remBtn2" label="Clear" dojoType="dijit.form.Button" />
|
|
<input type="submit" label="Submit" dojoType="dijit.form.Button" />
|
|
<div id="files2" dojoType="dojox.form.uploader.FileList" uploaderId="uploader2"></div>
|
|
</fieldset>
|
|
</form>
|
|
</td>
|
|
<td id="colImages">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|