динамически создавать iframe, прикреплять форму с файлом типа ввода, запускать просмотр и автоматически отправлять форму

Я пытаюсь добиться загрузки-файла-подобного-ajax-использования-скрытого-iframe. Очевидно, что для этой цели доступно множество плагинов, но я думаю, что мои требования немного отличаются. Итак, я пытаюсь добиться этого следующим образом:

HTML:

    <!DOCTYPE>
    <html> 
    <style>
        .file_upload{cursor:pointer;color:blue;text-decoration:underline;}
    </style>
    <body>
        <div class="file_upload" id="upload1" name="doc1" >Upload doc1</div>
        <div class="file_upload" id="upload2" name="doc2" >Upload doc2</div>
        <div id="iframe_div"></div>
    </body>
    </html>  

JЗАПРОС:

$(document).ready(function(){
                $(".file_upload").click(function(event){
                    var itr = $(".file_upload").length;
                    var iframeName = $(this).attr('name') + itr;
                    var iframeId = $(this).attr('id') + itr;
                    $('<iframe />', {
                        name: iframeName,
                        id: iframeId,
                        src: 'about:blank'
                    }).appendTo('#iframe_div');
                    //append form to body of the iframe
                    $('<form>',{
                        name: iframeName + '_form',
                        id: iframeId + '_form',
                        action: 'actionName.action',
                        method: 'POST',
                        enctype: 'multipart/form-data'
                    }).appendTo('#' + iframeId).find('body');
                    //append file input
                    //trigger 'click' using $('#file_fld_id').trigger('click')
                    //browse to file and use 'onchange' to trigger
                                      auto-submit of  the form
                    //replace the 'file-upload' div with a progress bar...
                   //remove the iframe when upload is complete
                });
            });

Вкратце:

<сильный>1. Открыть окно обзора по щелчку элемента div.

<сильный>2. Загрузите файл, используя скрытый iframe.

Но я думаю, что я слишком хорошо разбираюсь (в jquery), чтобы добиться этого. Или это действительно возможно?? Если это так, пожалуйста, помогите/перенаправьте/что-нибудь..... как получилось, что эта очевидная функциональность должна быть реализована с помощью обходных путей (вспышка, obex, серебряный свет, ....).. аххх.

РЕДАКТИРОВАТЬ (чтобы немного уточнить):

Как я уже упоминал, «мой iframe является динамическим» ... причина в том, что входные данные моего файла должны находиться внутри уже существующей формы с отдельным действием (struts2). У меня есть еще одно действие для загрузки файла. Поскольку у нас не может быть формы внутри формы, поэтому я пытаюсь использовать div внутри моей существующей формы для загрузки файла с другим действием. И у меня есть разные документы, которые нужно загрузить отдельно в этой форме. Итак, в основном я пытаюсь заменить каждый div (один из которых используется для загрузки файла) отдельным iframe, имеющим свою собственную форму (но то же действие будет обрабатывать загрузку), который будет автоматически отправлен в тот момент, когда пользователь нажимает «открыть» во время просмотра файл. Надеюсь, теперь я яснее.


person Amarjeet Kumar    schedule 04.11.2012    source источник
comment
что такое вопрос? как получить доступ к iframe DOM через js?   -  person zb'    schedule 04.11.2012
comment
@eicto: на данный момент .. да. Но этот iframe тоже динамический.   -  person Amarjeet Kumar    schedule 04.11.2012


Ответы (1)


Хорошо, здесь образец. Он может работать не во всех браузерах, я только что проверил на chrome 22, он не будет работать с другим доменом (такая же политика происхождения)

HTML:

<div id="hello">You will be asked to submit a file</div>
<div id="temp">
<iframe>
 
</iframe>
</div>
<button id="SelectFile">Select File</button>
<div id="filedialog">
    <form method="POST" action="/test.php" >
   <input type="file">
    </form>
</div>
​

CSS

#temp ,#filedialog{
 display:none;   
}

js:

var frame = $('#temp iframe');
var frameinit = function() {
    frame.contents().find('body').children().remove();
    frame.contents().find('body').append($('#filedialog').html());
    frame.contents().find('input').change(function() {
        frame.contents().find('form').submit();
    });
};
frameinit();
$('#SelectFile').click(

function() {
    frame.contents().find('input').click();
    frame.load(function() {
        //JSfiddle's error message from iframe
        var data = frame.contents().find('.pageHeader');
        $('body').append($('<div>').html(data));
        frameinit();
    });
});​
​

обратите внимание, что вы не можете вызвать диалоговое окно щелчка по файлу без реального щелчка браузера.

person zb'    schedule 04.11.2012
comment
Ну во-первых спасибо за помощь. По крайней мере, теперь у меня есть направление. Я обновил вопрос. Пожалуйста, посмотрите и предложите соответственно. - person Amarjeet Kumar; 04.11.2012
comment
и какая проблема сделать это с моим кодом? вы можете создать любую форму внутри iframe... - person zb'; 04.11.2012
comment
Я не могу использовать тег формы в html... в любом случае я принимаю ваш ответ, потому что надеюсь, что смогу решить. Но было бы здорово, если бы вы могли показать мне, как получить доступ к DOM динамического iframe. Этот мой код не добавляет форму. - person Amarjeet Kumar; 04.11.2012
comment
Вы не должны использовать тег формы в html, это просто образец, как вы можете видеть, я генерирую форму в iframe, используя функцию html(), которая возвращает строку. iframe, доступ к которому осуществляется с помощью содержимого() - это $(document) внутреннего iframe. - person zb'; 04.11.2012
comment
хм... я работаю над этим... обновлю, если закончу. На данный момент я могу вызвать диалоговое окно файла, не нажимая кнопку «Обзор»... посмотрите.. (jsfiddle.net/qv3MG ).но не знаю, смогу ли я вызвать его, когда входной файл находится внутри iframe, а также в тот момент, когда я нажимаю, он не существует!! - person Amarjeet Kumar; 04.11.2012
comment
это то, что я имею в виду, где-то должен быть щелчок, и обработчик этого щелчка может сделать щелчок по файлу, но вы не можете вызвать щелчок без щелчка. В моем коде вы тоже не нажимаете кнопку просмотра, это может быть кнопка, кнопка пользовательского интерфейса, div, ссылка, что угодно - person zb'; 04.11.2012
comment
проверьте это - все динамические, iframe, формы и т.д... - person zb'; 04.11.2012
comment
Я тоже делал то же самое... это должно сэкономить мне время... большое спасибо. - person Amarjeet Kumar; 04.11.2012
comment
что может быть причиной того, что он не работает в strts2.?? iframe создан, но форма не добавляется. - person Amarjeet Kumar; 05.11.2012
comment
Я понятия не имею о struts2 или какой-либо java :) Просто могу предложить проверить сгенерированные скрипты/страницы, поскольку java является серверной стороной. - person zb'; 06.11.2012