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

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

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

Использовать случай

  • Пользователь нажимает на просмотр и выбор файла...
  • Элемент управления <input type="file" /> скрыт.
  • jQuery обертывает <form> вокруг <input type="file" /> и добавляет новый <iframe>, который форма ссылается на target для ответа и отправляет форму.
  • На стороне сервера я запустил некоторую проверку и отправку имени, размера и опции для удаления.
  • В <iframe> (ответе) пользователь видит что-то вроде Winter.jpg | 10 KB | (x) удалить
  • jQuery clone() элемент управления <input type="file" class="uploader" /> и append() к <div> в случае, если пользователь хочет загрузить больше.
  • Примечание: помните, что clone(), <form> и <iframe> получают уникальные идентификаторы для id, name и target соответственно. Файл .ashx был протестирован и работает. Я смущен, почему я не могу продолжать создавать новые <form> s, <input type="file"/> и <iframe> и добавлять в список...

HTML

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

Javascript
К сожалению, код может быть немного неряшливым - пробная версия и ошибка здесь...

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

Выделенный 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>

Ответы

Ответ 1

Все, этот вопрос по-прежнему остается, но я внедрил jQuery Forms (который также работает с многоформатными формами с использованием iframes), изменил дизайн a бит, и он работает.

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

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

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

Я перебираю через context.Request.Files в С# и присоединяю их к связанному ListItem в SharePoint 2007.

Cheers,
Бобби

Ответ 2

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

Источник: jQuery

Ответ 3

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