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.
219 lines (213 loc) • 6.83 kB
HTML
<html lang="en">
<head>
<title>Test dojox.form.UploaderHTML5</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/Dialog.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/form/Button.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/layout/TabContainer.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/Dialog.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;
}
form{
width:315px;
margin-right:10px;
}
fieldset{
text-align:right;
}
input[type=text]{
width:140px;
}
.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;
}
.claro .attachButton{
width:350px;
height:60px;
border:0;
}
.claro .attachButton .dijitButton .dijitButtonNode{
background-color:#ffffff;
background-image:url(images/attach.png);
background-position:left top;
background-repeat:no-repeat;
height:56px;
border:0;
-moz-box-shadow:0 0 0;
-webkit-box-shadow:0 0 0;
}
.claro .attachButton .dijitButtonHover .dijitButtonNode{
background-position:0px -60px;
}
code{
font-family:monospace;
white-space:nowrap;
}
</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");
// Dynamically determining which plugin to use, based off of the location search.
var plug = "Form"; // Default
switch(document.location.search){
case "?html5":
dojo.require("dojox.form.uploader.plugins.HTML5");
plug = "HTML5";
break;
case "?iframe":
dojo.require("dojox.form.uploader.plugins.IFrame");
plug = "IFrame";
break;
case "?flash":
dojo.require("dojox.form.uploader.plugins.Flash");
plug = "Flash";
break;
}
var title = "Test dojox.form.Uploader + " + plug;
document.title = title;
var handleUpload = function(upl, node){
if(plug == "Form"){
dojo.connect(upl, "onChange", function(){
node.appendChild(dojo.create('div', {innerHTML:"This Uploader does not work in Form mode."}));
//alert("This Uploader does not work in Form mode.")
});
}
dojo.connect(upl, "onComplete", function(dataArray){
dojo.forEach(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);
});
});
}
dojo.addOnLoad(function(){
dojo.addClass(dojo.body(), plug);
dojo.query('h1')[0].innerHTML = title;
dojo.connect(dijit.byId("remBtn"), "onClick", dijit.byId("uploader"), "reset");
handleUpload(dijit.byId("uploader"), dojo.byId('colImages'));
});
</script>
</head>
<body class="claro">
<div role="main">
<h1>Test dojox.form.Uploader Flash</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="form">
The Uploader with no plugins is in "Form" mode. This mode <strong>will not do an Ajax upload</strong>.
Only form POSTs will work and they will navigate to the UploadFile.php page.
</p>
<p class="html5">
The HTML5 Uploder plugin does not support IE. HTML5 is more of a base class for IFrame or
Flash, or used in cases where IE is not a requirement. This test case is for development purposes.
</p>
<p class="iframe">
The IFrame plugin will use the IFrame to upload in IE. All other browsers will use the HTML5 plugin
unless force="iframe" is used.
When using this plugin, be sure your form use the attribute: <code>enctype="multipart/form-data"</code>
</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>
<a href="test_UploaderAll.html">Form</a>
<a href="test_UploaderAll.html?html5">HTML5</a>
<a href="test_UploaderAll.html?iframe">IFrame</a>
<a href="test_UploaderAll.html?flash">Flash</a>
</p>
<table class="pageTable" role="presentation">
<tr>
<td id="colForm">
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<fieldset>
<legend>Form Post Test</legend>
<input class="browseButton" name="uploadedfile" multiple="true" type="file" dojoType="dojox.form.Uploader" label="Select Some Files" 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" 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>
</td>
<td id="colImages">
</td>
</tr>
</table>
</body>
</html>