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>

查询： 

$(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 中）无法实现这一点。或者真的可以吗？？如果是这样，请帮助/重定向/任何东西......为什么这个明显的功能必须通过变通方法来实现（flash，obex，silverlight，......）..ahhh。

编辑（澄清一点）：

正如我提到的'我的 iframe 是动态的'......原因是我的文件输入应该在一个已经存在的表单中，并带有一个单独的操作（struts2）。我还有另一个文件上传操作。由于我们不能在表单中使用表单，所以我正在尝试在现有表单中使用 div 来通过其他操作上传文件。我有不同的文档要在这个表格中单独上传。所以基本上我试图用一个单独的 iframe 替换每个 div（一个用于文件上传），它有自己的表单（但相同的操作会处理上传），当用户在浏览时点击“打开”时，它会自动提交文件。我希望我现在更清楚了。

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 回答