转换后将base64字符串发布到MVC控制器

时间:2016-11-23 17:31:17

标签: javascript asp.net-mvc asp.net-mvc-4

在客户端,我允许用户上传图像,然后将图像转换为base64图像。我想将其发送到控制器,然后控制器将重建图像,但我正在努力将base64字符串正确地传递给控制器​​。

我不相信我也是以最好的方式做到这一点。

以下是HTML页面:

<form id="qrForm" action="" method="post" enctype="multipart/form-data">

    <label class="btn btn-default btn-file btn-block btn-lg">
        <span class="glyphicon glyphicon-camera"></span>
        Begin
        <input type="file" accept="image/*;capture=camera" name="file" id="file" onchange="encodeImageFileAsURL();" style="display: none;">
    </label>
</form>

<form id="base64Form" action="" method="post" enctype="multipart/form-data">
    <input type="hidden" id="base64Img" name="base64Img" />
</form>

<script type="text/javascript">

function encodeImageFileAsURL()
{
    var filesSelected = document.getElementById("file").files;

    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        var fileReader = new FileReader();

        fileReader.onload = function (fileLoadedEvent)
        {
            var srcData = fileLoadedEvent.target.result; // <--- data: base64

            var newImage = document.createElement('img');
            newImage.src = srcData;

            console.log("Converted Base64 version is " + newImage.outerHTML);

            document.getElementById("base64Img").value = newImage.outerHTML;
            document.forms["base64Form"].submit();
        }

        fileReader.readAsDataURL(fileToLoad);
    }
}

</script>

这是控制器:

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(string base64Img)
{
    if (base64Img.Length > 0)
    {
        // do something
    }
}

提前致谢。

0 个答案:

没有答案