218 lines
6.8 KiB
HTML
218 lines
6.8 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.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">
|
|
<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">
|
|
<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" />
|
|
<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>
|
|
</td>
|
|
<td id="colImages">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</body>
|
|
</html>
|