jQuery iframe文件上传

我找到了解决方案。下面的代码是:

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

在此之后，您可以将事件附加到输入按钮以侦听"更改"。此外，您可以使用json从服务器获取进度，所有这些都可以在任何浏览器事件IE3+中工作。像这样:

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

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

http://jquery.malsup.com/form/文件上传

你知道，与其多次获取同一项，为什么不直接重用它呢:

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

你犯了什么错误?你能把它寄出去吗?

由于你不能自己设置属性，这里有一个解决方法:

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