Question

我有一个彩色框弹出窗口，显示我的视图 - UploadDocument。在此视图中，我有文件上传元素（type =“file”）和文本框。

以下是colorbox-

的代码

 parent.parent.$.fn.colorbox({
                            href: url +  '?callingWindow=' + window.frameElement.id,
                            open: true,
                            iframe: true,
                            width: "450px",
                            height: "300px",
                            title: "Upload Document",
                            close: '<button id=\"Save\">Save</button><button id=\"Cancel\">Cancel</button>',
                            onClosed: false
                        });

UploadDocument视图是 -

<h4 class="resume">Upload a document to presentation </h4>
    <div class="description">Please click on the link below to add documents to your presentation.</div>

    <table id="fieldsTable" class="tblFields">
    <tr>
    <td class="description">Choose file:</td>
        <td> <input id="fileDialog" type="file" name="file"/></td>
    </tr>
    <tr>
    <td class="description">Description:</td>
        <td> <input type="text" id="docFileName" style="width: 225px;"/></td>
    </tr>
    <tr>
    <td colspan="2" width="300px"><span class="errorMessage" id="spanErrorMessage"></span></td>
    </tr>
   </table>

在我的视图中，我在Save按钮的单击上调用控制器操作的Post方法。

<script type="text/javascript">
parent.$('#Save').click(function() {
             $.ajax({
                    url: '@Url.Action("UploadDocument", "MyController")',
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: { id: cmaId},
                    success: function () {
                        alert('added to temp');
                    }
                });
});
</script>

现在，当我使用HttpPostedFileBase作为参数调用action方法UploadDocument时。它一直都是空的。

是否因为要实现这一点，我们必须有一个标签并输入= submit？由于我不能在这里做，因为保存按钮不是视图的一部分，但是它是父母，有没有其他方法可以通过正常的按钮点击并且没有任何表格标签来做到这一点？

Answer 1

通过ajax调用上传的文件无法像您认为的那样工作 - 您只是无法发布表单值，就像它带有几个文本框的标准表单帖子一样。

有一些插件可以帮助你，或者根据你的要求，你可以利用FormData - 这里是你的代码与formdata：

parent.$('#Save').click(function() {
    var data = new FormData();
    fd.append("id", cmaId);
    fd.append("fileDialog", $("#fileDialog")[0]);

    $.ajax({
        url: '@Url.Action("UploadDocument", "MyController")',
        type: 'POST',
        dataType: 'json',
        data: data,
        contentType: false,
        processData: false,
        success: function () {
            alert('added to temp');
        }
    });
});

我没有运行它，它很粗糙，但它应该足以让你开始。如果你打算在FormData中使用jQuery，那么请注意contentType + processData选项需要设置为false，这样jQuery就不会改变你的帖子数据/标题。

在没有表单标签的MVC上传文件

1 个答案: