<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>SWFUpload v2.0 simplified with jQuery interface and a nice fallback</title>
<style rel="stylesheet">
body {
margin:0;
padding:1em;
}
fieldset {
padding:1em;
margin:0;
}
</style>
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form action="/images/" method="post" enctype="multipart/form-data" target="target-iframe" id="upload-form">
<fieldset>
<legend>Files uploaded</legend>
<!-- the upload target is used as an anchor on submit in some browsers -->
<iframe id="target-iframe" name="target-iframe" style="height:1.3em;width:100%;"></iframe>
<ul id="progress-target">
</ul>
<p id="multiple-upload" style="display:none">
<input type="button" value="Upload files (Max 3 MB)" id="upload-button" />
<input id="cancel-button" type="button" value="Cancel uploads" disabled="disabled" />
</p>
<p id="single-upload">
<!-- it's better not to change the name of the field -->
<input type="file" name="FileData" id="file" /> (Max 3 MB)
<input type="submit" value="Upload file" id="submit-button" />
<br />
</p>
</fieldset>
</form>
<script type="text/javascript">
// avoid polluting the namespace
(function(){
// hide the iframe : a browser without javascript still has a feedback
$('#target-iframe').css('height', 0).css('width', 0).css('border', 0);
// callbacks for the SWF movie
var handlers = {
uploadReady: function(){
$('#multiple-upload').show();
$('#single-upload').hide();
},
fileDialogComplete: function(num_files_queued) {
if (this.getStats().files_queued > 0) {
$('#cancel-button').attr('disabled', 'disabled');
}
this.startUpload();
},
uploadStart: function(fileObj) {
$('#cancel-button').attr('disabled', false);
$('#upload-button').attr('disabled', 'disabled');
$('#progress-target').append($('<li id="'+fileObj.id+'">'+fileObj.name+' <span></span></li>'));
return true;
},
uploadProgress: function(fileObj, bytesLoaded, bytesTotal) {
var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
$('#'+fileObj.id+' span').html(' : '+percent+'%');
},
uploadSuccess: function(fileObj, server_data) {
$('#'+fileObj.id+' span').html(' : Done');
},
uploadComplete: function(fileObj) {
if (this.getStats().files_queued == 0) {
$('#cancel-button').attr('disabled', 'disabled');
$('#upload-button').attr('disabled', false);
} else {
this.startUpload();
}
},
uploadError: function(file, error_code, message) {
$('#'+file.id).text("Error during upload : "+ this.uploadErrorMessage(error_code));
}
};
// SWFUpload instance
var upload = new SWFUpload({
// Backend Settings
post_params: {"PHPSESSID" : "32f32f3"},
upload_url: $('#upload-form')[0].action,
// File Upload Settings
file_size_limit : "3072", // 3MB
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "10",
file_queue_limit : "0",
// Event Handler Settings
fileDialogComplete : handlers.fileDialogComplete,
uploadStart : handlers.uploadStart,
uploadProgress : handlers.uploadProgress,
uploadSuccess : handlers.uploadSuccess,
uploadComplete : handlers.uploadComplete,
uploadReady : handlers.uploadReady,
uploadError : handlers.uploadError,
flash_url : "swfupload/swfupload_f8.swf",
debug_enabled: true
});
$('#upload-button').click(function() {
upload.selectFiles();
$('#cancel-button').attr('disabled', false);
});
$('#cancel-button').click(function() {
upload.cancelQueue();
$('#cancel-button').attr('disabled', 'disabled');
});
// handle response for single upload
var handle_response = function(iframe) {
if(!iframe.contentWindow)
return
response = iframe.contentWindow.document.getElementsByTagName('body')[0].innerHTML;
if(!response || $.trim(response) == "") {
return;
}
// the server response has to be like this : sucess;message
response = response.split(";");
if(response[0] == 'success')
$('#progress-target').append($('<li>'+response[1]+' <span>: Done.</span></li>'));
else
$('#progress-target').append($('<li class="failed">Upload as failed : '+ response[1] +'</li>'));
$('#file').before($('<input type="file" name="FileData" id="file" />')).remove();
$('#submit-button').attr('disabled', false);
}
$('#target-iframe')[0].onload = function() {
handle_response(this);
}
$('#upload-form').submit(function() {
$('#submit-button').attr('disabled','disabled');
// ie don't understand onload on iframe correctly
if($.browser.msie) {
alert("ie")
var inter = setInterval(function() {
if($('#target-iframe')[0].contentWindow.document){
clearInterval(inter);
handle_response($('#target-iframe')[0]);
}
}, 500);
}
return true;
}
);
}());
</script>
</body>
</html>
