在客户端,我允许用户上传图像,然后将图像转换为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
}
}
提前致谢。