Simulare "Allega un altro file" di GMail

**Mackey** · 27-12-2006, 19:02

Ciao a tutti,
vorrei uno script che mi riproponga le stesse funzioni di GMAIL per quanto riguarda l'aggiunta di un nuovo allegato.

In pratica inizialmente ho un input di tipo FILE (solo uno), poi clicco su "Allega un altro file" e ne compare un altro... così all'infinito. Non sarà proprio all'infinito, ma è una funzione abbastanza dinamica.

Ho provato con innerHTML, ma questo mi cancella il testo di tutti gli input.file precedenti.
Ho provato con DOM, ma funziona a malapena su firefox e non sono sicuro che sia la soluzione migliore.

Voi cosa mi consigliate? Vorrei una soluzione crossbrowser.
Grazie amici.

**Mega69** · 27-12-2006, 19:39

Quando usi innerHTML, non devi usare l'operatore = bensi +=

elemento.innerHTML+="il mio testo";

**Mackey** · 28-12-2006, 11:03

si lo so... infatti uso quello,
ma quello non lascia inalterato il contenuto del DIV contenitore.

Equivale a dire
elemento.innerHTML = elemento.innerHTML + "<input ....... />"

Questo significa che se io ho riempito i precedenti input, li vedrò di nuovo... MA VUOTI!

**Andrea1979** · 28-12-2006, 11:58

Si cancellano perché innerHTML += prevede la riscrittura dell'intero innerHTML e quindi per ragioni di sicurezza i file fields vengono svuotati.

Prova questo

codice:

<html>
<head>
<script language="javascript">
function addFileUpload(fld) {
  var new_row = document.getElementById(fld).insertRow();
  var new_td = new_row.insertCell();
  new_td.innerHTML = '<input type="file" name="uploads[]" />';
}
</script>
</head>
<body>
<form name="mioform">
<table id="fileupload">
<tr>
  <td>
    <input type="file" name="uploads[]" />
  </td>
</tr>
</table>
<input type="button" onclick="addFileUpload('fileupload');" value="more" />

</form>
</body>
</html>

Così, aggiungi righe ad una tabella via DOM e le righe precedenti non vengono assolutamente modificate.

**Mackey** · 28-12-2006, 12:18

L'ho provato.... e funziona....

peccato che utilizzi le tabelle e funzioni solo su Internet Explorer... però siamo sulla buona strada

**Andrea1979** · 28-12-2006, 12:25

ah, è un problema di FF che non riconosce le funzioni senza argomenti. Ti basta aggiungere come argomento di insertRow e insertCell un bel -1 che viene invece assunto come valore di default in IE.

**Mackey** · 28-12-2006, 13:33

Ok, però lo lascio perdere perchè non voglio utilizzare le tabelle.

Io mi sto scervellando in questo script DOM ma non riesco a capire perchè setAttributeNS non funziona!! Eppure dalle specifiche la sintassi è giusta!!
Naturalmente ho commentato la parte di codice non funzionante

Codice PHP:


<style type="text/css">

.i100x100 {

    width:100%;

    clear:both;

}

</style>

<div>Carica immagini dal tuo PC<div id="imagesfileupload"><input type="file" name="images[]" size="50" class="i100x100" onchange="addNewElement();" /></div></div>

<input type="button" value="nuovo" onclick="addNewElement();" />

<script type="text/javascript">

function addNewElement() { 

    var imfu = document.getElementById("imagesfileupload"); 

    var xhtml = "http://www.w3.org/1999/xhtml";

    var fu;

    if(document.createElementNS && (fu=document.createElementNS(xhtml,"input"))!=null

    && fu.setAttributeNS!==undefined){

        alert("metodo usato: createElementNS");



/*

        fu.setAttributeNS(xhtml,"type","file");

        fu.setAttributeNS(xhtml,"name","images[]");

        fu.setAttributeNS(xhtml,"size","50");

        fu.setAttributeNS(xhtml,"class","i100x100");

        fu.setAttributeNS(xhtml,"onchange","addNewElement();");

*/

        fu.type = "file";

        fu.name = "images[]";

        fu.size = "50";

        fu.className = "i100x100";

        fu.onchange = addNewElement;



        imfu.appendChild(fu);

    }

    else if(document.createElement && (fu=document.createElement("input"))!=null

    && fu.setAttribute!==undefined){

        alert("metodo usato: createElement");



        fu.setAttribute("type","file");

        fu.setAttribute("name","images[]");

        fu.setAttribute("size","50");

        fu.className = "i100x100";

        fu.onchange = addNewElement;



        imfu.appendChild(fu);

    }

    else {

        alert("nessuno");

    }



}

</script>

**Mackey** · 28-12-2006, 16:34

Aiuto... su google e qui sul forum non si trova niente su setAttributeNS

praticamente ci ho perso un giorno su questa cosa

**Mega69** · 28-12-2006, 17:43

Volendo puoi fare una funzione che salva i value degli input.
Dopo innerHTML fai in modo che i value vengano riassegnati agli input.

Abbozzo qualcosa:

codice:

myValues=new Array();

function prendiInput() {
myInputs=new Array();
myInputs=elemento.getElementsByTagName("input");
for(i=0; i!=myInputs.lenght; i++)
   {
       salvaValue(myInputs[i], i);
   }
}

function salvaValue(elem, num) {
myValues[num]=elem.getAttribute("value");
}

function reimpostaValue_innerHTML() {
elemento.innerHTML+="quello che vuoi tu";
myInputs=new Array();
myInputs=elemento.getElementsByTagName("input");
for(g=0; g!=myInputs.lenght-i; g++)
   {
       myInputs[g].setAttribute("value", myValues[g]);
   }
}

Dovrebbe funzionare. L'importante è che non usi altri contatori con nome di variabile i. Altrimneti vai nella funzione prendiInput e sostituisci i con un altro nome.

**Andrea1979** · 28-12-2006, 20:36

Servito.

codice:

<html>
<head>
<script language="javascript">

function addFileUpload2(fld) {
  var nodeBr = document.createElement('br');
  document.getElementById(fld).appendChild(nodeBr);
  var nodeInput = document.createElement('input');
  nodeInput.type = "file";
  nodeInput.name = "uploads2[]";
  document.getElementById(fld).appendChild(nodeInput);
}
</script>
</head>
<body>
<h1>Senza Tabelle</h1>
<form name="altroform">
<div id="fileupload_2">
  <input type="file" name="uploads2[]" />
</div>
<input type="button" value=" more " onclick="addFileUpload2('fileupload_2');" />
</form>
</body>
</html>

Discussione: Simulare "Allega un altro file" di GMail

Strumenti discussione

Ricerca discussione

Visualizza

Simulare "Allega un altro file" di GMail

Permessi di invio