ASP.NET MVC 控制器在上传 Blob 时导致页面重新加载

Question

当我通过 ajax 将 Blob 发送到控制器时，将文件保存在控制器中会导致页面刷新。如果我不保存文件，它不会刷新。我的代码：

更新我启动了一个新的空白 ASP.NET MVC 5 应用程序，复制了 ajax 代码，如果我保存它仍然会刷新页面控制器中的文件。

控制器：

public class PicUploadTestsController : Controller
{
    public ActionResult WhosebugSample()
    {
        return View();
    }

    [HttpPost]
    public string UploadPic()
    {
        var length = Request.ContentLength;
        var bytes = new byte[length];
        Request.InputStream.Read(bytes, 0, length);

        WebImage webImage = new WebImage(bytes);
        var path = Path.Combine(Globals_mt.Instance.ServerRootPath, "Areas/SampleTests/Img/test.jpg");

        //If I comment out the save, no reload happens
        webImage.Save(path);

        return "/Areas/SampleTests/Img/test.jpg";
    }
}

打字稿：

$(function () {

$('#blob-upload').change((e) => {

    var input = <HTMLInputElement>e.target;
    var file = input.files[0];

    getBlob(file, (blob: Blob) => {
        var xhr = new XMLHttpRequest();
        xhr.open('post', '/SampleTests/PicUploadTests/UploadPic', true);
        xhr.send(blob);
    });
});


function getBlob(file: File, callback: Function) {
    var filereader = new FileReader();

    filereader.onloadend = () => {
        var imageEl = new Image();
        imageEl.onload = () => {
            var width = imageEl.width;
            var height = imageEl.height;
            var canvasEl: HTMLCanvasElement = document.createElement('canvas');
            var context: CanvasRenderingContext2D = canvasEl.getContext('2d');
            canvasEl.width = width;
            canvasEl.height = height;
            context.drawImage(imageEl, 0, 0, width, height);

            var blob: Blob = dataUrlToBlob(canvasEl.toDataURL(file.type));
            callback(blob);
        };
        var result = filereader.result;
        imageEl.src = result;
    };

    filereader.readAsDataURL(file);
}

function dataUrlToBlob(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = parts[1];

        return new Blob([raw], { type: contentType });
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { type: contentType });
}

});

剃须刀视图：

@using (Html.BeginForm())
{
    <label>ajax blob to FileReceiver()</label>
    <input type="file" id="blob-upload" />
}

无论我尝试过什么都会发生这种情况，包括直接上传文件、使用 file.SaveAs() 保存文件或 Blob、将 blob 包装在 FormData() 中、将保存操作移出class 库的控制器，在视图中没有表单，即直接在页面上有一个 <input type="file" /> 等等

我正在使用 ASP.NET MVC 5，Visual Studio 2015

我是不是漏掉了一些简单的东西？我曾经让这个工作正常。

注意：我上传 blob 的原因是因为在实际代码中，我将图像缩小为缩略图，这样我就不必上传 6mb 的文件来创建 75 x proportionalHeight图片。

Answer 1

您需要 return 从您的 JavaScript 中设置为 false，这样页面就不会刷新。

$('#blob-upload').change((e) => {

    var input = <HTMLInputElement>e.target;
    var file = input.files[0];

    getBlob(file, (blob: Blob) => {
        var xhr = new XMLHttpRequest();
        xhr.open('post', '/SampleTests/PicUploadTests/UploadPic', true);
        xhr.send(blob);
    });
return false;
});

Answer 2

原来问题出在 Visual Studio 的 Mads Kristenson 浏览器 Link 扩展，我禁用了它，问题得到解决

ASP.NET MVC 控制器在上传 Blob 时导致页面重新加载

ASP.NET MVC Controller causing page reload when uploading a Blob

c#

asp.net-mvc

asp.net-mvc-controller