I did a simple upload script JavaScript/php in objected oriented style, prototype, etc.. I'd think multiply event fire would not be a problem, but when end upload process, it fired four times when testing online. I can use a flag (I did this before) to avoid multiply endings, but I'm curious about the "academic" point of view - what am I doing wrong or is something of life to deal with somehow.
There is some code, I'm listing the beginning, I guess the problem should be there:
function formUpload(formID){
var here = this;
this.nome = formID;
this.xhr = new XMLHttpRequest();
this.monitor_ini = document.querySelector('form[name="'+this.nome+'"] label[name="monitor_ini"]');
this.monitor_info = document.querySelector('form[name="'+this.nome+'"] label[name="monitor_info"]');
this.monitor_result = document.querySelector('form[name="'+this.nome+'"] label[name="monitor_result"]');
this.monitor_pos = document.querySelector('form[name="'+this.nome+'"] label[name="monitor_pos"]');
this.form = document.forms[formID];
if(!this.form){
alert('Erro formUpload: formulário "'+formID+'" não localizado na página.');
} else {
this.Exts = new Array();
// Eventos
this.form.arquivo.addEventListener("change", function(evt){ here.activate(evt); }, false);
this.form.submit.addEventListener("click", function(evt){ here.upload(evt); }, false);
// Ambiente
this.url = phpBase+this.form.dest.value;
}
}
formUpload.prototype.ini = function(){
// Testar
var here = this;
this.monitor_ini.innerHTML = 'Testando...';
var fd = new FormData();
fd.append("dir", this.url);
fd.append("op", "ini");
fd.append("saida", "json");
this.xhr = new XMLHttpRequest();
this.xhr.addEventListener("load", function(evt){ here.ini_test(evt); }, false);
this.xhr.addEventListener("error", function(evt){ here.ini_failed(evt); }, false);
this.xhr.addEventListener("abort", function(evt){ here.ini_canceled(evt); }, false);
/* Be sure to change the url below to the url of your upload server side script */
this.xhr.open("POST", httpPhpBib+"Upload.php");
this.xhr.send(fd);
}
formUpload.prototype.ini_test = function(evt){
//console.log("Retorno do servidor: "+evt.target.responseText);
var jsonRes = evt.target.responseText;
jsonRes = jsonRes.slice(jsonRes.indexOf("{"), jsonRes.lastIndexOf("}")+1);
try{
var Res = JSON.parse(jsonRes);
if(Res.erro!="OK"){
this.monitor_ini.innerHTML = "Erro: "+Res.msg;
} else {
this.monitor_ini.innerHTML = "";
var jExts = this.form.arquivo_tipos.value;
this.Exts = JSON.parse(jExts);
this.monitor_info.innerHTML = this.ajuda();
}
} catch(e){
this.monitor_ini.innerHTML = "Erro!";
console.log("formUpload ini_test Erro: "+e.message+" Resposta do servidor: "+jsonRes);
alert("Erro de teste de Upload. Resposta JavaScript: "+e.message);
}
}
formUpload.prototype.ini_failed = function(evt){
this.monitor_ini.innerHTML = 'Erro!';
}
formUpload.prototype.ini_canceled = function(evt) {
this.monitor_ini.innerHTML = 'Teste abortado!';
}
formUpload.prototype.upload = function() {
var here = this;
this.form.submit.disabled='disabled';
this.form.cancel.disabled = false;
this.form.cancel.addEventListener("click", function(evt){ here.uploadCancel(evt); }, false);
var Meta = new Object();
Meta.nome = (form.nome.value.length>0)? form.nome.value : "null" ;
Meta.descr = (form.descr.value.length>0)? form.descr.value : "null" ;
var fd = new FormData();
fd.append("Filedata", form.arquivo.files[0]);
fd.append("dir", this.url);
fd.append("nome", form.nomearq.value+"."+form.extarq.value);
fd.append("op", "upload");
fd.append("meta", JSON.stringify(Meta));
fd.append("saida", "json");
this.xhr = new XMLHttpRequest();
this.xhr.upload.addEventListener("progress", function(evt){ here.uploadProgress(evt); }, false);
this.xhr.addEventListener("load", function(evt){ here.uploadComplete(evt); }, false);
this.xhr.addEventListener("error", function(evt){ here.uploadFailed(evt); }, false);
this.xhr.addEventListener("abort", function(evt){ here.uploadCanceled(evt); }, false);
this.xhr.open("POST", httpPhpBib+"Upload.php");
this.xhr.send(fd);
this.monitor_result.innerHTML = "Iniciando upload...";
return false;
}
"FormID" is the html interface element ID. The rest I wrote or picked the code around the web.