jQuery iframe 文件上传

IT技术 javascript jquery
2021-03-15 06:04:20

我正在使用 jQuery 构建文件上传,但我在尝试设置表单属性时遇到 jQuery 错误:

$(document).ready(function () {
    $("#formsubmit").click(function () {

        var iframe = $('<iframe name="postframe" id="postframe" class="hidden" src="about:none" />');

        $('div#iframe').append(iframe);

        $('#theuploadform').attr("action", "/ajax/user.asmx/Upload")
        $('#theuploadform').attr("method", "post")
        $('#theuploadform').attr("userfile", $('#userfile').val())
        $('#theuploadform').attr("enctype", "multipart/form-data")
        $('#theuploadform').attr("encoding", "multipart/form-data")
        $('#theuploadform').attr("target", "postframe")
        $('#theuploadform').submit();
        //need to get contents of the iframe

        $("#postframe").load(
            function () {
                iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
                $("div#textarea").html(iframeContents);
            }
        );
    }
);


<div id="uploadform">
    <form id="theuploadform" action="">
        <input id="userfile" name="userfile" size="50" type="file" />
        <input id="formsubmit" type="submit" value="Send File" />
    </form>
</div>

<div id="iframe" style="width: 0px; height: 0px; display: none;">
</div>

<div id="textarea">
</div>
5个回答

我找到了解决方案。此代码有效:

<script type="text/javascript">

    $(document).ready(function () {

        $("#formsubmit").click(function () {

            var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none"></iframe>');

            $("body").append(iframe);

            var form = $('#theuploadform');
            form.attr("action", "/upload.aspx");
            form.attr("method", "post");

            form.attr("encoding", "multipart/form-data");
            form.attr("enctype", "multipart/form-data");

            form.attr("target", "postiframe");
            form.attr("file", $('#userfile').val());
            form.submit();

            $("#postiframe").load(function () {
                iframeContents = this.contentWindow.document.body.innerHTML;
                $("#textarea").html(iframeContents);
            });

            return false;

        });

    });

</script>


<form id="theuploadform">
    <input id="userfile" name="userfile" size="50" type="file" />
    <input id="formsubmit" type="submit" value="Send File" />
</form>

<div id="textarea">
</div>
form.attr("file", $('#userfile').val()) 似乎没有做任何事情。它包含文件的名称,但浏览器会自动发布该名称。
2021-04-19 06:04:20
非常感谢我花了很长时间试图解决它,对于那些现在可能找到它的人,请注意,如果您计划上传,您应该使用 e.preventDefault 不返回 false 并删除函数开头的 iFrame(如果它存在)使用这个的多个文件
2021-04-22 06:04:20
对于复制此代码的人 - iframe 应该有一个结束标记,它不是自动关闭的,尽管它在某些浏览器中可能会像这样工作。
2021-04-24 06:04:20
谢谢你,简单的代码并完成工作,比我读过的所有教程都要好!
2021-05-01 06:04:20
为了完整起见,只有在同一域中访问 iframe 的内容时,才能读取 iframe 的内容。其他域会抛出安全错误
2021-05-17 06:04:20

它不是官方插件,但是这里有一个示例,说明如何将表单的提交逻辑包装到插件中。

例子:

<form method="post" enctype="multipart/form-data">
    <input name="file" type="file" />

    <input type="text" name="test" />

    <button type="submit">Submit</button>
</form>

<script>
    $('form').submit(function (e) {

        //prevent default submit
        e.preventDefault();

        //submit through frame
        $(this).frameSubmit({
            done: function (form, frame, options) {
                console.log('done!');
            },
            fail: function (form, frame, options) {
                console.log('fail!');
            },
            always: function (form, frame, options) {
                console.log('always!');
            }

            //custom hasError implementation if needed
            //by default if the frame's body HTML contains the text "unexpected error" or "server error"
            //it is treated as an error
            /*,hasError: function (frame) {
                return false;
            }*/
        });
    });

</script>

插入

!function ($, doc) {
    var _frameCount = 0,
        _callbackOptions = ['done', 'fail', 'always'],
        _hasFailed = function (frame) {
            var frameHtml = $(frame).contents().find('body').html();

            return /(server|unexpected)\s+error/i.test(frameHtml);
        },
        _createFrame = function () {
            return $('<iframe>').prop('name', 'jq-frame-submit-' + _frameCount++).hide().appendTo(doc.body);
        };

    $.fn.extend({
        frameSubmit: function (options) {

            return this.each(function () {
                var deferred = $.Deferred(),
                    form = this,
                    initialTarget = form.target,
                    hasTarget = form.hasAttribute('target'),
                    hasFailed = options.hasFailed || _hasFailed,

                    //The initial frame load will fire a load event so we need to
                    //wait until it fires and then submit the form in order to monitor
                    //the form's submission state.
                    $frame = _createFrame().one('load', function () {
                        $frame.one('load', function () {
                            deferred[hasFailed(this) ? 'reject' : 'resolve'](form, this, options);
                            $frame.remove();
                        });

                        form.submit();

                        //restore initial target attribute's value
                        if (hasTarget) form.target = initialTarget;
                        else form.removeAttribute('target');
                    });

                //attach handlers to the deferred
                $.each(_callbackOptions, function (i, optName) {
                    options[optName] && deferred[optName](options[optName]);
                });

                //make sure the form gets posted the to iframe
                form.target = $frame.prop('name');
            });
        }
    });
}(jQuery, document);

您的表单目标应与 iframe 名称相同,例如:

<form target="frame" 
      action="http://posttestserver.com/post.php?dir=example" 
      method="post"
      enctype="multipart/form-data">
    <input name="file" type="file"/>
</form>

<iframe name="frame"></iframe>

在此之后,您可以将事件附加到输入按钮以侦听“更改”。此外,您可以使用 jsonp 从服务器获取进度,所有这些都适用于任何浏览器事件 IE3+。像这样的东西:

$('input').change(function () {
    $('form').submit();
});

$.getJSON('/echo/jsonp/?callback=?', function(e, progress) {
    console.log(progress);
});

这是一个使用ajax上传文件的好插件

http://jquery.malsup.com/form/#file-upload

您知道与其多次获取相同的项目,不如直接重用它:

var form = $('#theuploadform');
form.attr("action", "/ajax/user.asmx/Upload");
form.attr("method", "post");
// and so on

你有什么样的错误?你能发一下吗?

更新

由于您无法在此处自己设置属性,因此可以解决以下问题:

将表单放在 iframe 中,并将 onchange 事件附加到输入按钮。当用户选择一个文件时,您触发必要的代码上传文件(提交),然后父窗口可以关闭 iframe。

很简单,不要让我设置 attr 用户文件。
2021-04-25 06:04:20