Transferir vários valores do input file para uma variável global.

[rockcavera 0]

Eu sou novato em javascript, comecei faz alguns dias.

 

Eu estou tentando fazer um sistema de upload múltiplo. Mas o problema está quando depois de adicionado certos arquivos querer adicionar mais posteriormente, pois o input file apaga os anteriores e só fica os novos selecionados. (O upload é feito por php que é o de menos para mim).

 

Vamos la no meu código.

 

Formulado:

<form action="" method="post" enctype="multipart/form-data" name="f1" id="f1">
  <input id="vfile" type="hidden" value="0" />
  <input type="file" name="files[]" id="files1" onChange="teste()" multiple />
  <input type="submit" name="button" id="button" value="Submit" />
</form>
<output id="list"></output>

Agora o Javascript:

var globs;

function teste() {
	
	obj = document.getElementById('files1');
	vfile = document.getElementById('vfile');
	if (parseInt(vfile.value) > 0) {
		//Aqui está o problema.
	} else {
		globs = obj.files;
		vfile.value = 1;
	}
	var f = "";
	for (var i = 0; i < obj.files.length; i++) {
		var f = f+obj.files[i].name+" size: "+obj.files[i].size+" bytes<br>";
	}
	var f = f+"<br>Global<br>"
		for (var i = 0; i < globs.length; i++) {
		var f = f+globs[i].name+" size: "+globs[i].size+" bytes<br>";
	}
	document.getElementById("list").innerHTML=f;
}

 

O fato de imprimir os elementos da Global foi um modo de debugar o script.

 

La no problema eu quero passar os novos valores do "obj.files" para a "globs" que já tem outros valores sem perder os valores atuais da "globs". Já tentei usar push, join e concat, todos sem sucesso.

 

Espero que possam me ajudar.

[rockcavera 0]

Eu consegui fazer que funcione, mas caso eu queira adicionar um botão para deletar o arquivo já selecionado e ele estiver em uma multiple, não irei conseguir deletar. Só conseguirei incluir essa funcionalidade se restringir 1 arquivo por vez ser selecionado.

 

O código atual do javascript:

var globs;
var ff = 1;

function addFile(v1, v2, v3, v4) {
	var input = document.createElement('input');
	input.type = 'file';
	input.name = v2;
	input.id = v3;
	input.files = v4;
	//input.style.display = 'none';
	v1.appendChild(input);
}

function teste() {
	var obj = document.getElementById('files1');

	if (ff > 1) {
		var f1 = document.forms['f1'];
		addFile(f1, 'files[]', 'files'+ff, globs);
		ff++;
	}

	if (ff == 1) {
		ff++;
	}

	var f = "";
	for (e=1;e<ff;e++) {
		var ffiles = document.getElementById('files'+e);
		for (i=0;i<ffiles.files.length;i++) {
			var f = f+ffiles.files[i].name+" size: "+ffiles.files[i].size+" bytes<br>";
		}
	}
	document.getElementById("list").innerHTML=f;
	globs = obj.files;
}

 

O form:

<form action="" method="post" enctype="multipart/form-data" name="f1" id="f1">
  <input type="file" name="files[]" id="files1" onChange="teste()"  multiple />
  <input type="submit" value="Submit" />
</form>
<output id="list"></output>

Testei e esta enviando os arquivos. Mas queria uma forma de poder tratar cada arquivo separadamente sem ter que desabilitar o multiple.

[paulojuchem 20]

opa cara, blz?

da uma olhada nisso

 

http://www.uploadify.com/

 

eu sempre usei, a versão free é bem boa, tem os eventos certinho pra ti pegar o que foi upado e travar no js, espero que ajude :D

[rockcavera 0]

opa cara, blz?

da uma olhada nisso

 

http://www.uploadify.com/

 

eu sempre usei, a versão free é bem boa, tem os eventos certinho pra ti pegar o que foi upado e travar no js, espero que ajude :D

 

Não é isso que estou querendo. =\

 

Procura uma solução usando apenas javascript.

[William Bruno 1501]

isso não é possível cara, e nem vai funcionar.

[rockcavera 0]

isso não é possível cara, e nem vai funcionar.

 

Pesquisei em vários lugares, e também cheguei nessa conclusão. Mas parece que da pra fazer com AJAX. Maximo que consegui foi criar o Object FileList, mas na hr de adicionar um Object File dentro, não consegui colocar ele no item(0), item(1) e assim vai. Caso fosse possível isso, creio que o meu objetivo daria certo.

 

Vlw Abraço!