jQuery Несколько динамических форм для нескольких динамических iFrames

Question

Я создаю многофайловую загрузку. В процессе проверки, когда я создаю список файлов (до их отправки), первый динамически созданный <form> будет отправлять и работать как ожидалось, но другой динамически созданный <form> не будет. Это не работает в IE7 + или FireFox ...

отметить также, что этот код в SharePoint 2007 в случае возникновения каких-либо ограничений любой может укажут! Благодаря!

Использования

1. Пользователь нажимает просматривать и выбирает файл ...
2. <input type="file" /> управления скрыта.
3. jQuery обертывает <form> вокруг <input type="file" /> и добавляет новый , что форма ссылается на target на ответ и представляет форму.
4. На стороне сервера я запустил некоторую проверку и отправил обратно имя файла, размер и параметр для удаления.
5. В (отзыв) пользователь видит что-то вроде Winter.jpg | 10 KB | (Х) удалить
6. JQuery clone() «S <input type="file" class="uploader" /> управления и append()» S его к <div> в случае, если пользователь желает, чтобы загрузить больше.
7. Примечание: иметь в виду clone(), <form> и приведены уникальные идентификаторы для id, name и target соответственно. Файл .ashx был протестирован и работает. Я запутался, почему я не могу продолжать создавать новые <form> с, <input type="file"/> 'с, и ' S и добавив к списку ...

HTML

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

Javascript
К сожалению, код может быть суд НЕМНОГО 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> 

Я понял, что вы, ребята могли бы спросить, так вот оказывается HTML ...

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> 

Answer 1

Все, этот вопрос все еще остается, но я реализовал jQuery Forms (, который также работает ж/многочастные формы с помощью Iframes), изменил дизайн немного, и она работает.

Если бы я должен был догадаться, я думаю, что проблема была вызвана где-то в создании <form>, <input type="file" /> и другие элементы на лету в JS. Это было, как если бы SharePoint было правило или слушателя, который был incercepting события формы submit() и return false; не позволяя ему добраться до обработчика ASHX ...

я использую тот же HTML выше, только теперь JavaScript использует один <input type="file /> управление и <form>. Я добавляю результат через $.ajaxSubmit({success: function(result)}).

Я все еще clone() входы и добавьте их в результат. Когда пользователь выбирает загрузку изображений, я просто создаю объект <form> в JS и использую также $.ajaxSubmit.

Я итерацию через в context.Request.Files в C# и присоединить их к соответствующему ListItem в SharePoint 2007.

Приветствия,
Бобби

Answer 2

Попробуйте передавая верным методу клон(). Это связывает данные и события.

Источник: jQuery

Answer 3

По мне использовать функцию клонирования JQuery, который может решить вашу проблему, здесь ссылка http://api.jquery.com/clone/