Question

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

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

控制器：

public class PicUploadTestsController : Controller
{
    public ActionResult StackOverflowSample()
    {
        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()中，将保存操作移出控制器到一个类库，在视图中没有表单，即直接在页面上有<input type="file" />等等。

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

我在这里错过了一些简单的东西吗？我曾经有过这样的工作。

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

Answer 1

原来问题是Mads Kristenson对Visual Studio的浏览器链接扩展，我禁用了该问题并且问题已解决

Answer 2

您需要从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;
});

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

2 个答案: