Javascript jQuery iframe文件上载

我正在使用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>

$（文档）.ready（函数（）{
$（“#表单提交”）。单击（函数（）{
变量iframe=$（''）；
$（'div#iframe'）。追加（iframe）；
$（“#上传表单”）.attr（“操作”，“ajax/user.asmx/Upload”）
$（“#上传表单”）.attr（“方法”，“发布”）
$（'theuploadform'）.attr（“userfile”，$（'theuploadform'）.val（）
$（“#上传表单”）.attr（“enctype”，“多部分/表单数据”）
$（“#上传表单”）.attr（“编码”，“多部分/表单数据”）
$（“#上传表单”）.attr（“目标”、“后帧”）
$（“#上传表单”）.submit（）；
//需要获取iframe的内容
$（“#postframe”）.load(
函数（）{
iframeContents=$（“iframe”）[0].contentDocument.body.innerHTML；
$（“div#textarea”）.html（iframeContents）；
}
);
}
);

您知道，与其多次提取同一项目，为什么不重新使用它：

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

你犯了什么样的错误？你能把它贴出来吗

更新

由于您无法自行设置属性，因此需要解决以下问题：

将表单放入iframe中，并将onchange事件附加到输入按钮。

---

当用户选择一个文件时，您触发必要的代码以上载该文件（提交），然后父窗口可以关闭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>

$（文档）.ready（函数（）{
$（“#表单提交”）。单击（函数（）{
变量iframe=$（''）；
$（“正文”）。附加（iframe）；
变量形式=$（“#上传形式”）；
form.attr（“action”，“/upload.aspx”）；
表格attr（“方法”、“职位”）；
attr（“编码”、“多部分/表单数据”）；
form.attr（“enctype”、“多部分/表单数据”）；
表格attr（“目标”、“后框架”）；
form.attr（“file”，$（'#userfile'）.val（）；
表单提交（）；
$（“#positframe”）.load（函数（）{
iframeContents=this.contentWindow.document.body.innerHTML；
$（“#textarea”）.html（iframeContents）；
});
返回false；
});
});

表单目标应与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>

---

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

例如：

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

提交
$（'form'）。提交（函数（e）{
//防止默认提交
e、 预防默认值（）；
//通过框架提交
$（此）.frameSubmit({
完成：功能（形式、框架、选项）{
console.log（'done！'）；
},
失败：函数（形式、框架、选项）{
console.log（'fail！'）；
},
始终：功能（形式、框架、选项）{
console.log（'always！'）；
}
//自定义HASRERROR实现（如果需要）
//默认情况下，如果框架的主体HTML包含文本“意外错误”或“服务器错误”
//它被视为一个错误
/*，hasError:函数（帧）{
返回false；
}*/
});
});

插件

!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);

！函数（$，doc）{
var_frameCount=0，
_callbackOptions=['done'，'fail'，'always']，
_hasFailed=功能（帧）{
var frameHtml=$（frame.contents（）.find（'body'）.html（）；
返回/（服务器|意外）\s+错误/i.test（frameHtml）；
},
_createFrame=函数（）{
返回$（''）.prop（'name'，'jq frame submit-'+\u frameCount++）.hide（）.appendTo（doc.body）；
};
$.fn.extend({
frameSubmit：功能（选项）{
返回此。每个（函数（）{
var deferred=$.deferred（），
形式=这个，
initialTarget=form.target，
hasTarget=form.hasAttribute（'target'），
hasfiled=options.hasfiled | | | u hasfiled，
//初始帧加载将触发加载事件，因此我们需要
//等待它触发，然后提交表单以进行监视
//表单的提交状态。
$frame=\u createFrame（）.one（'load'，function（）{
$frame.one（'load'，function（）{
递延[已失败（此）-“拒绝”：“解决”]（表单、此、选项）；
$frame.remove（）；
});
表单提交（）；
//恢复初始目标属性的值
如果（hasTarget）form.target=initialTarget；
else form.removeAttribute（“目标”）；
});
//将处理程序附加到延迟的
$.each（_callbackOptions，function（i，optName）{
期权[optName]&递延期权[optName]（期权[optName]）；
});
//确保表单已发布到iframe
form.target=$frame.prop（'name'）；
});
}
});
}（jQuery，文档）；

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

---

此行的目的是什么？

$（'theuploadform'）.attr（“userfile”，$（'theuploadform'）.val（））

由于安全原因，浏览器实际上无法访问文件输入的值，它将返回一些虚假路径。如果您错了，您可以读取该值，但不能更改它。该值返回什么？我说过它将返回一个值，而不是文件的实际路径。很简单，不要让我设置attr userfile。谢谢我花了很多时间试图解决这个问题，对于那些现在可能找到它的人来说，请注意您应该使用e.preventDefault不返回false并删除iFram

!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);