Updated
This commit is contained in:
Éric Lemoine
183
master/examples/test_Uploader.html
Normal file
183
master/examples/test_Uploader.html
Normal file
@@ -0,0 +1,183 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user