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();
    }

当我发出请求文件为null时，我们该怎么做？

Answer 1

您可以尝试使用jquery ajax并将contentType选项设置为false，从而强制jQuery不为您添加Content-Type标头，否则，边界字符串将丢失

processData也需要设置为false。

默认情况下，作为对象传递到data选项的数据（从技术上讲，不是字符串）将被处理并转换为查询字符串，以适合默认的内容类型“ 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);
}

如何将文件保存在localStorage中，以后再在mvc中的服务器上发送文件

1 个答案: