как сохранить файл в localStorage, а затем отправить его на сервер в mvc

Question

Как сохранить файл в localStorage, а затем извлечь его и отправить на сервер для его сохранения.

<input id="File1" type="file" onchange="saveLocal();" />
<button type="button" onclick="saveServer()">Sync</button>
<script>
    function saveServer()
    {
        var blob = localStorage.getItem("file");
        var form = new FormData();
        form.append("file", blob);
        AjaxPost("/Grades/test", form, function (data) {
            alert(data);
        });
    }
    function saveLocal()
    {
        var file = $("#File1")[0].files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            localStorage.setItem("file", reader.result);
            $("#File1").val("");
        }
        reader.readAsDataURL(file);
    }
</script>

и код на стороне сервера -

[HttpPost]
    public ActionResult test(HttpPostedFileBase file)
    {
        return View();
    }

при выдачефайл запроса пуст, как мы это делаем?

Answer 1

Вы можете попробовать использовать jquery ajax и установить для параметра contentType значение false, вынудив jQuery не добавлять заголовок Content-Type для вас, в противном случае строка границы будет отсутствовать в нем.

processData необходимо также установить значение false.

По умолчанию данные, передаваемые в параметр данных как объект (технически, что угодно, кроме строки), будут обрабатываться и преобразовыватьсяв строку запроса, соответствующую типу содержимого по умолчанию «application / x-www-form-urlencoded».Если вы хотите отправить DOMDocument или другие необработанные данные, установите для этого параметра значение false.

function saveServer()
{
    var blob = localStorage.getItem("file");
    var form = new FormData();
    form.append("file", blob);

    $.ajax({
    url: '/Grades/test', //full url 
    data: form,
    type: 'POST',
    contentType: false, 
    processData: false,
    success:function(data) {
      alert(data);
    } 
    });

}
function saveLocal()
{
    var file = $("#File1")[0].files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        localStorage.setItem("file", reader.result);
        $("#File1").val("");
    }
    reader.readAsDataURL(file);
}