Question

yBrowser：IE9 技术：MVC5

我主要使用Angular来处理我页面上的所有内容。（单页应用程序）。

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

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 ：有没有人知道将HttpPostedFileBase数据发送到控制器的方法，而不使用表单的提交操作？

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

如果不是：

问题＃2 如何在提交完成后阻止页面进入/ Attachment / UploadTempFileToServer？

Answer 1

回答＃2（假设您正在使用jQuery）：

$(document).on('submit', '#attachmentForm', function(event){

    event.preventDefault();

    // everything else you want to do on submit
});

对于＃1，遗憾的是，除非浏览器支持XMLHttpRequest2对象（我不相信IE9会这样做），否则您无法通过ajax发送文件数据。但是，有些插件可以将表单提交给隐藏的iframe。我认为Mike Alsup的Form插件具有这种能力：http://malsup.com/jquery/form/#file-upload

Answer 2

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

使用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"
        );
    }

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

2 个答案: