asp.net-mvc-3 - MVC3 将图像传递给控制器

Question

我在 javascript 中创建图像并将其分配给 javascript 中的 img 元素。如何在 MVC3 中单击 ActionButton 时将该图像传递给控制器​​？

Javascript

var picture = jqplotToImg($('#ChartContent')); //method to change chart as picture, no needed here
var img = document.getElementById("img1");
img.src = picture;

看法

@using (Html.BeginForm())
{
  <img id="img1" name="img1" />
 @Html.ActionButton("Export","ExportData","Report")
}

控制器

public void ExportReport(FormCollection fc)
{
}

Answer 1

您可以使用HTML5 File API它允许您将图像异步上传到服务器。

这是另一个example如何将图像转换为 Base64 字符串的方法，然后可以使用 AJAX 等任何方式将其发送到服务器。

Answer 2

我提示了base64字符串，然后复制并使用它来测试，所以它失败了。我为此使用了ajax方法并且它有效

    function ExportData() {
    var picture = jqplotToImg($('#ChartContent'));
    //prompt("", picture);

    $.ajax({ type: 'POST',
        url: '../Report/Base64ToImage',
        async: false,
        data: { source: picture },
        success: function (data) {
            //alert(data);
        }
    });
    window.location.href = "../Report/ExportChart";
}

[HttpPost]
    public void Base64ToImage(string source)
    {
        string base64 = source.Substring(source.IndexOf(',') + 1);
        base64 = base64.Trim('\0');
        byte[] data = Convert.FromBase64String(base64);
        string path = System.Configuration.ConfigurationManager.AppSettings["UploadFolder"].ToString();

        var file = Server.MapPath(path + "Chart.jpg");
        System.IO.File.WriteAllBytes(file, data);
    }