0

ajax-like-file-upload-using-hidden-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の）知識が多すぎると思います。それとも本当にありえるの？？もしそうなら、助けて/リダイレクト/何でもしてください.....どうしてこの明白な機能が回避策（フラッシュ、オベックス、シルバーライト、....）で実装されなければならないのですか。

編集（少し明確にするため）：

「私のiframeは動的です」と述べたように...理由は、私のファイル入力が別のアクション（struts2）を持つ既存のフォーム内にあるはずだからです。ファイルをアップロードするためのアクションがもう 1 つあります。フォーム内にフォームを含めることはできないため、既存のフォーム内で div を使用して、他のアクションでファイルをアップロードしようとしています。また、このフォーム内で個別にアップロードするさまざまなドキュメントがあります。したがって、基本的には、各 div (ファイルのアップロードに使用されるもの) を独自のフォーム (ただし、同じアクションでアップロードを処理する) を持つ個別の iframe に置き換えようとしています。これは、閲覧中にユーザーが「開く」をクリックした瞬間に自動送信されますファイル。私は今、より明確になったことを願っています。

4

1 に答える 1

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();
    });
});​
​

実際のブラウザをクリックしないと、ファイルダイアログのクリックをトリガーできないことに注意してください。

于 2012-11-04T10:57:26.187 に答える