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

Question

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

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

Вариант использования

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

Answer 1

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

Если бы мне пришлось угадывать, я думаю, что проблема была вызвана где-то при создании <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 в C # и присоединяю их к связанному ListItem в SharePoint 2007.

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

Answer 2

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

Answer 3

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

Источник: jQuery