Question

我正在尝试实现 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>

JQUERY：

$(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，....）..啊......

编辑（澄清一下）：

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

Answer 1

好的，here示例。它可能无法在所有浏览器上运行，我只检查了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();
    });
});

请注意，如果没有真正的浏览器点击，您将无法触发点击文件对话框。

动态创建iframe，附加带有输入类型文件的表单，触发浏览并自动提交表单

1 个答案: