Question

我想用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);
}

Answer 1

正如epascarello建议我更改了Asp Mvc方法以返回Content而不是Json

public ActionResult Upload(IEnumerable<HttpPostedFileBase> file)
{
     return Content("some string in json format");
}

现在内容已加载到iframe而不是下载提示符。

iframe文件上传在IE上工作

1 个答案: