jQuery Birden Fazla Dinamik Formdan Birden Fazla Dinamik iFrame'ye

Question

Çok dosyalı bir yükleme oluşturuyorum. Dosya listesini oluşturduğum doğrulama işleminde (gönderilmeden önce), dinamik olarak oluşturulan ilk <form>, beklendiği gibi işlenecek ve dinamik olarak oluşturulan diğer <form>'lar olmayacaktır. Bu IE7 + veya FireFox'ta çalışmıyor ... Ayrıca

nota, bu kod 2007 durumda herkes işaret edebilir herhangi bir kısıtlama vardır SharePoint var! Teşekkürler!

Kullanım Örneği

1. Kullanıcı tıklama göz ve bir dosya seçer ...
2. <input type="file" /> kontrolü gizlenir.
3. jQuery, <form>'u <input type="file" /> etrafında sarar ve formun yanıt için target olarak başvuruda bulunduğu ve formu gönderdiği yeni bir ekler.
4. Sunucu tarafında, bazı doğrulama işlemleri yapıyorum ve dosya adını, boyutunu ve kaldırılacak seçeneği geri gönderiyorum.
5. (yanıtında) kullanıcı Winter.jpg | 10 KB | (X) kullanıcı daha yüklemek istediği durumunda <div> için
6. jQuery clone() 'ın <input type="file" class="uploader" /> kontrolü ve append()' s onu kaldırın.
7. Not: zihin clone(), <form> tutmak ve id, name için benzersiz kimlikler verilmiş ve target sırasıyla edilir. .ashx dosyası test edildi ve çalışıyor. Ben

HTML

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

JavaScript ... Ben yeni <form> s, <input type="file"/> 's ve ' s oluşturma ve listeye eklemeye devam edemez neden karıştı
Maalesef kodu ... bir bitin sloppy-- deneme ve burada hata olabilir

<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> 

Ben klon() yöntemine sadık geçen deneyin ...

Rendered HTML

<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>