jQuery Múltiples formas dinámicas en varios iFrames dinámicos

Question

Estoy creando una carga de varios archivos. En el proceso de validación donde construyo la lista de archivos (antes de que se envíen), el primer <form> creado dinámicamente se enviará y funcionará como se esperaba, pero el otro creado dinámicamente <form> no lo hará. Esto no funciona en IE7 + o Firefox ...

también tomar nota, este código está en SharePoint 2007 en caso de que haya alguna restricción cualquiera puede señalar! ¡Gracias!

de casos de uso

1. El usuario hace clic navegar y selecciona un archivo ...
2. El control <input type="file" /> es oculto.
3. jQuery ajusta un <form> alrededor del <input type="file" /> y agrega un nuevo que el formulario hace referencia como target para la respuesta y envía el formulario.
4. En el lado del servidor, ejecuto alguna validación y envío el nombre del archivo, el tamaño y una opción para eliminar.
5. En el (respuesta) el usuario ve algo así como Winter.jpg | 10 KB | (X) eliminar
6. jQuery clone() 's las <input type="file" class="uploader" /> control y append()' s a la <div> en caso de que el usuario desea subir más.
7. Nota: tener en cuenta la clone(), <form> y se dan identificadores únicos para el id, name, y target respectivamente. El archivo .ashx ha sido probado y funciona. Estoy confundido por qué no puedo seguir creando nuevos <form> s, <input type="file"/> 's, y ' s y añadiendo a la lista ...

HTML

<div id="files"> 
    <div class="field"> 
     <input id="file" type="file" name="file" class="uploader" value="Browse..." /> 
    </div> 
</div> 

Javascript
lo sentimos, el código podría ser prueba y error aquí un poco sloppy-- ...

<script type="text/javascript"> 
    $('.uploader').live('change', function(){ 
     var $clone = $(this).parent().clone(); 
     var filename = $(this).val().substring($(this).val().lastIndexOf('\\')+1); 

     //var $form = $('<form id="uploadForm" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo" enctype="multipart/form-data">'); 
     var $form = $('<form>').attr('id', 'uploadForm').attr('action', '_layouts/GetFileInfo.ashx').attr('method', 'post').attr('target', 'fileinfo').attr('enctype', 'multipart/form-data'); 
     var $result = $('<iframe name="fileinfo' + _uploadId + '" src="upload.html" frameBorder="0" allowtransparency="true" style="width: 250px; height: 25px; border:0;">'); 

     $form[0].id += _uploadId; 
     $form[0].target += _uploadId; 
     $clone.find('input')[0].id += _uploadId; 
     $clone.find('input')[0].name += _uploadId; 

     //remove button 
     $('<div class="remove" style="float:right;">').html("x").appendTo($(this).parent()); 

     //append the goodness   
     $(this).parent().append($result); 
     $(this).wrap($form); 

     //let the form render and submit 
     window.setTimeout(function(){ 
      $('#files form').last().submit(); 
     }, 1000); 

     $(this).hide(); 

     $clone.find('input').val(''); 

     $(this).parents('#files').append($clone); 

     _uploadId++; 
    }); 
</script> 

que pensé que ustedes podrían preguntar por lo que aquí está el HTML representado ...

HTML representado

<div style="float: left;" class="col" id="files"> 
    <div class="field"> 
     <form id="uploadForm0" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo0" enctype="multipart/form-data"> 
      <input type="file" value="Browse..." class="uploader" name="file" id="file" style="display: none;"> 
     </form> 
     <div style="float: right;" class="remove">x</div> 
     <iframe frameborder="0" style="width: 250px; height: 25px; border: 0pt none;" allowtransparency="true" src="upload.html" name="fileinfo0"></iframe> 
    </div> 
    <div class="field"> 
     <form id="uploadForm1" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo1" enctype="multipart/form-data"> 
      <input type="file" value="Browse..." class="uploader" name="file0" id="file0" style="display: none;"> 
     </form> 
     <div style="float: right;" class="remove">x</div> 
     <iframe frameborder="0" style="width: 250px; height: 25px; border: 0pt none;" allowtransparency="true" src="upload.html" name="fileinfo1"></iframe> 
    </div> 
    <div class="field"> 
     <input type="file" value="Browse..." class="uploader" name="file01" id="file01"> 
    </div> 
</div> 

Answer 1

Todo, este problema sigue siendo implementada pero jQuery Forms (que también funciona w/impresos de varias copias mediante el uso de iframes), cambió el diseño un poco, y funciona.

Si tuviera que adivinar, creo que el problema se debía a alguna parte en la creación del <form>, <input type="file" />, y otros elementos sobre la marcha en JS. Era como si SharePoint tenía una regla o detector que se ha incercepting el evento de formulario submit() y return false; no permitiendo que se haga al controlador de ASHX ...

Puedo usar el mismo código HTML anterior, sólo que ahora el código JavaScript utiliza un único <input type="file /> control y <form>. Añado el resultado por $.ajaxSubmit({success: function(result)}).

Todavía guardo clone() las entradas y las adjunto con el resultado. Cuando el usuario selecciona cargar las imágenes, simplemente creo un objeto <form> en JS y usa $.ajaxSubmit en eso también.

que iterar a través de la context.Request.Files en C# y las incluirá en el ListItem asociado en SharePoint 2007.

Cheers,
Bobby

Answer 2

Trate de pasar cierto que el método clone(). Eso mantiene los datos y los eventos vinculados.

Fuente: jQuery

Answer 3

Según usarme función de la copia de jQuery que puede resolver su problema, aquí está el enlace http://api.jquery.com/clone/