iframe 文件上传在 IE 上不起作用

Posted 2023-05-09

【中文标题】iframe 文件上传在 IE 上不起作用

【英文标题】：Iframe file upload doesent work on IE

【发布时间】：2015-12-04 03:45:38

【问题描述】：

我想用 ajax 上传文件。 所以我有一个小的 jquery 插件，可以在页面上添加一个按钮。单击按钮后，它将打开一个带有表单和文件输入的引导对话框。表单提交给 ASP MVC 方法，保存文件并返回 json，在 alert 中显示。

它在 chrome 中运行良好，但在 IE 中，iframe 的 onload 函数未被调用，浏览器为我提供了 json 供下载。

服务器端：

public ActionResult Upload(IEnumerable<HttpPostedFileBase> file)

     return Json(new  FileName = file.First().FileName );

客户端：

$.fn.fileUpload = function (options) 
    //options
    var settings = $.extend(
        inputName: 'file'
    , options);

    //variables
    var that = this;
    var index = 0;
    var addFileBtn = $("<button>+</button>");

    var modal = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+
                      '<div class="modal-dialog" role="document">'+
                        '<div class="modal-content">'+
                          '<div class="modal-header">'+
                            '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                            '<h4 class="modal-title" id="myModalLabel">Modal title</h4>'+
                          '</div>'+
                          '<div class="modal-body">' +
                            '<iframe name="postiframe" id="postiframe" style="width:0;height:0;border:0px solid #fff"></iframe>' +
                            '<form id="my_form" name="my_form" action="/Home/Upload" method="POST" enctype="multipart/form-data" target="postiframe">' +
                                '<input name="complaintId" value="123"  type="hidden" />'+
                                '<input name="file" id="file" type="file"/>'+
                                '<input type="submit" value="Submit" id="submitBtn"/>'+
                            '</form>'+
                          '</div>'+
                          '<div class="modal-footer">'+
                            '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+
                            '<button type="button" class="btn btn-primary">Save changes</button>'+
                          '</div>'+
                        '</div>'+
                      '</div>' +
                    '</div>');

    //init
    addFileBtn.click(function () 
        modal.modal();
        modal.find("#submitBtn").click(function (ev) 
            var form = modal.find('#my_form');

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

            modal.find("#postiframe").load(function () 
                var iframeContents = $(this).contents().find("pre").html()
                alert(iframeContents);
            );

            form.submit();
            return false;

        );
    );
    that.append(addFileBtn);

【问题讨论】：

你正在提交一个表单并返回 JSON。有些浏览器会将 JSON 显示为纯文本，有些则要求下载它。听起来您不想返回 JSON。

谢谢。将 ASP 方法更改为返回 Content(string content) 而不是 Json，看起来没问题。如果你把它写成答案，我会接受它。

【参考方案1】：

按照 epascarello 的建议，我将 Asp Mvc 方法更改为返回 Content 而不是 Json

public ActionResult Upload(IEnumerable<HttpPostedFileBase> file)

     return Content("some string in json format");

现在内容是在 iframe 中加载而不是下载提示。