MVC 5阻止表单提交时刷新页面

ArjaaAine 发表于 Dev

ArjaaAine

yBrowser：IE9技术：MVC5

我主要将Angular用于页面上的所有内容。（单页应用）。

但是因为我正在使用IE9，所以无法使用FileAPI。因此，我决定使用MVC的Form Actions在控制器方法中获取HttpPostedFileBase来处理文件上传。

HTML代码：（以模态形式出现）

@using (Html.BeginForm("UploadTempFileToServer", "Attachment", FormMethod.Post, new { enctype = "multipart/form-data", id = "attachmentForm" }))
{
    <div>
        <span id="addFiles" class="btn btn-success fileinput-button" ng-class="{disabled: disabled}" onclick="$('#fileUpload').click();">
            <span>Add files...</span>
        </span>
        <input id="fileUpload" type="file" name="files" class="fileInput" onchange="angular.element(this).scope().fileAdded(this)" />
    </div>
    <div>
        <span class="control-label bold">{{currentFilePath}}</span>
        <input name="fileUniqueName" value="{{fileUniqueName}}" />
        <input id="attachmentSubmit" type="submit" value="Upload File" />
    </div>
}

MVC控制器：

public void UploadTempFileToServer(IEnumerable<HttpPostedFileBase> files, string fileUniqueName)
    {
        var folderPath = fileStorageFolder;

        foreach (var file in files)
        {
            if (file.ContentLength > 0)
            {
                file.SaveAs(folderPath + fileUniqueName);
            }
        }
    }

问题1：有人知道不使用表单的Submit操作将HttpPostedFileBase数据发送到控制器的方法吗？

如果需要的话，我不介意使用Jquery。我尝试劫持表单的提交动作，但没有用。我尝试使用非提交按钮事件发送文件控件的数据，但也没有运气。

如果不：

问题＃2如何在完成执行提交后阻止页面转到/ Attachment / UploadTempFileToServer？

ArjaaAine

因此，经过大量研究和尝试。这是我的解决方案：

使用https://github.com/blueimp/jQuery-File-Upload/wiki

HTML：

之前，我使用了隐藏文件上传控件，并通过跨度触发了单击。但是由于安全问题，由javascript打开的文件输入也无法由javascript提交。

<div class="col-md-7">
    <div class="fileupload-buttonbar">
        <label class="upload-button">
            <span class="btn btn-success btnHover">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
                <input id="fileUpload" type="file" name="files"/>
            </span>
        </label>
     </div>
</div>

Javascript：

$('#fileUpload').fileupload({
    autoUpload: true,
    url: '/Attachment/UploadTempFileToServer/',
    dataType: 'json',
    add: function (e, data) {
        var fileName = data.files[0].name;
        var ext = fileName.substr(fileName.lastIndexOf('.'), fileName.length);

        var attachment = {
            AttachmentName: fileName,
            Extension: ext
        }

        var fileUniqueName = id + ext;

        //Sending the custom attribute to C#
        data.formData = {
            fileUniqueName: fileUniqueName
        }

        data.submit().success(function (submitData, jqXhr) {
            attachment.Path = submitData.path;

            //Add the attachment to the list of attached files to show in the table.
            $scope.attachmentControl.files.push(attachment);
            //Since this is not a direct angular event.. Apply needs to be called for this to be bound to the view.
            $scope.$apply();

        }).error(function (errorData, textStatus, errorThrown) {

        });
    },
    fail: function (data, textStatus, errorThrown) {

    }
});

C＃：

public virtual ActionResult UploadTempFileToServer(string fileUniqueName)
    {
        //Getting these values from the web.config.
        var folderPath = fileStorageServer + fileStorageFolder + "\\" + tempFileFolder + "\\";

        var httpPostedFileBase = this.Request.Files[0];
        if (httpPostedFileBase != null)
        {
            httpPostedFileBase.SaveAs(folderPath + fileUniqueName);
        }
        return Json(new
            {
                path = folderPath + fileUniqueName
            },
            "text/html"
        );
    }