Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

236 lines (201 sloc) 10.022 kB
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>noSWFUpload - Multiple Files Upload For Every Browser - No SWF Object Required</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="noSWFUpload - Multiple Files Upload For Every Browser - No SWF Object Required" />
<meta name="Keywords" content="upload,multiple,file,files,no swf,no flash,open source" />
<meta name="category" content="Web 2.0" />
<meta http-equiv="content-Language" content="en-US" />
<meta name="identifier-url" content="www.3site.eu" />
<meta name="author" content="Andrea Giammarchi" />
<meta name ="copyright" content="Andrea Giammarchi" />
<meta name ="generator" content="Notepad++" />
<meta name="code_Language" content="JavaScript" />
<meta name ="robots" content="ALL" />
<style type="text/css">
* {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
font-weight: normal;
}
img {
border: 0;
}
body {
text-align: center;
}
h1 {
font-size: 12pt;
}
h2 {
margin-top: 32px;
font-size: 8pt;
font-weight: bold;
}
h3 {
font-size: 8pt;
}
div.form {
text-align: left;
margin: auto;
width: 246px !important;
width: 242px;
height: 180px;
position: relative;
border: 1px solid #999;
}
input.submit {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
font-size: 8pt;
width: 248px !important;
width: 242px;
border: 1px solid #999;
margin: -1px 0 0 -1px;
position: absolute;
top: 180px;
left: 0;
}
</style>
<script type="text/javascript" src="noswfupload.js"></script>
<script type="text/javascript">
// add dedicated css
noswfupload.css("css/noswfupload.css", "css/noswfupload-icons.css");
onload = function(){
var
// the input type file to wrap
input = document.getElementsByTagName("input")[0],
// the submit button
submit = document.getElementsByTagName("input")[1],
// the form
form = document.getElementsByTagName("form")[0],
// the form action to use with noswfupload
url = form.getAttribute("action") || form.action,
// noswfupload wrap Object
wrap;
// if we do not need the form ...
// move inputs outside the form since we do not need it
with(form.parentNode){
appendChild(input);
appendChild(submit);
};
// remove the form
form.parentNode.removeChild(form);
// create the noswfupload.wrap Object with 1Mb of limit
wrap = noswfupload.wrap(input, 1024 * 1024);
// form and input are useless now (remove references)
form = input = null;
// assign event to the submit button
noswfupload.event.add(submit, "click", function(e){
// only if there is at least a file to upload
if(wrap.files.length){
submit.setAttribute("disabled", "disabled");
wrap.upload(
// it is possible to declare events directly here
// via Object
// {onload:function(){ ... }, onerror:function(){ ... }, etc ...}
// these callbacks will be injected in the wrap object
// In this case events are implemented manually
);
} else
noswfupload.text(wrap.dom.info, "No files selected");
submit.blur();
// block native events
return noswfupload.event.stop(e);
});
// set wrap object properties and methods (events)
// url to upload files
wrap.url = url;
// accepted file types (filter)
// wrap.fileType = "Images (*.jpg, *.jpeg, *.png, *.gif, *.bmp)";
// fileType could contain whatever text but filter checks *.{extension} if present
// handlers
wrap.onerror = function(){
noswfupload.text(this.dom.info, "WARNING: Unable to upload " + this.file.fileName);
};
// instantly vefore files are sent
wrap.onloadstart = function(rpe, xhr){
// we need to show progress bars and disable input file (no choice during upload)
this.show(0);
// write something in the span info
noswfupload.text(this.dom.info, "Preparing for upload ... ");
};
// event called during progress. It could be the real one, if browser supports it, or a simulated one.
wrap.onprogress = function(rpe, xhr){
// percent for each bar
this.show((this.sent + rpe.loaded) * 100 / this.total, rpe.loaded * 100 / rpe.total);
// info to show during upload
noswfupload.text(this.dom.info, "Uploading: " + this.file.fileName);
// fileSize is -1 only if browser does not support file info access
// this if splits recent browsers from others
if(this.file.fileSize !== -1){
// simulation property indicates when the progress event is fake
if(rpe.simulation)
// in this case sent data is fake but we still have the total so we could show something
noswfupload.text(this.dom.info,
"Uploading: " + this.file.fileName,
"Total Sent: " + noswfupload.size(this.sent + rpe.loaded) + " of " + noswfupload.size(this.total)
);
else
// this is the best case scenario, every information is valid
noswfupload.text(this.dom.info,
"Uploading: " + this.file.fileName,
"Sent: " + noswfupload.size(rpe.loaded) + " of " + noswfupload.size(rpe.total),
"Total Sent: " + noswfupload.size(this.sent + rpe.loaded) + " of " + noswfupload.size(this.total)
);
} else
// if fileSIze is -1 browser is using an iframe because it does not support
// files sent via Ajax (XMLHttpRequest)
// We can still show some information
noswfupload.text(this.dom.info,
"Uploading: " + this.file.fileName,
"Sent: " + (this.sent / 100) + " out of " + (this.total / 100)
);
};
// generated if there is something wrong during upload
wrap.onerror = function(){
// just inform the user something was wrong
noswfupload.text(this.dom.info, "WARNING: Unable to upload " + this.file.fileName);
};
// generated when every file has been sent (one or more, it does not matter)
wrap.onload = function(rpe, xhr){
var self = this;
// just show everything is fine ...
noswfupload.text(this.dom.info, "Upload complete");
// ... and after a second reset the component
setTimeout(function(){
self.clean(); // remove files from list
self.hide(); // hide progress bars and enable input file
noswfupload.text(self.dom.info, "");
// enable again the submit button/element
submit.removeAttribute("disabled");
}, 1000);
};
};
</script>
</head>
<body>
<h1>noSWFUpload Demo Page</h1>
<div class="form">
<form method="post" action="filereceiver.php" enctype="multipart/form-data">
<div>
<input type="file" name="test" />
<input class="submit" type="submit" value="Upload File" />
</div>
</form>
</div>
<h2>(C) Andrea Giammarchi - <a href="#">WebReflection</a></h2>
<h3><a href="#">noSWFUpload Project Page</a></h3>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml11-blue"
alt="Valid XHTML 1.1" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img
style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.