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.
218 lines
6.7 KiB
218 lines
6.7 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.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>
|
|
|