I use coppie js in asp.net core 6 but when sned models item blob is null send to my controller but a few data send it is ok?? plz help me that why can not send more data to controller?
$('#btnupload').on('click', function ()
{
event.preventDefault();
var btn = $(this);
var $form = btn.closest("form");
basic.croppie('result', 'blob').then(function (blob)
{
var myform=$('#frmData')[0];
var formData = new FormData(myform);
formData.append('filename', 'FileName.jpeg');
formData.append('blob', blob);
var myAppUrlSettings =
{
MyUsefulUrl: '@Url.Action("Create", "ItemCategory")'
}
var request = new XMLHttpRequest();
request.open('POST', myAppUrlSettings.MyUsefulUrl);
request.send(formData);
request.onreadystatechange = function () { // Call a function when the state changes.
if (this.readyState === XMLHttpRequest.DONE && this.status === 200)
{
var response = JSON.parse(request.responseText);
if (response.message == "OK")
{
}
}
}
});
});
I don't know how your controller is implemented, I have a code example here, you may refer to it:
First I create a target folder for Images under wwwwroot:
Controller code:
public class ImageController : Controller
{
private IHostingEnvironment Environment;
public ImageController(IHostingEnvironment _environment)
{
Environment = _environment;
}
[HttpGet]
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Save()
{
string base64 = Request.Form["imgCropped"];
byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
string filePath = Path.Combine(this.Environment.WebRootPath, "Images", "Cropped.png");
using (FileStream stream = new FileStream(filePath, FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
return RedirectToAction("Index");
}
}
View:
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" asp-controller="Image" asp-action="Save">
<input type="file" id="FileUpload1" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>
<img id="Image1" src="" alt="" style="display: none" />
</td>
<td>
<canvas id="canvas" height="5" width="5"></canvas>
</td>
</tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<input type="submit" id="btnUpload" value="Upload" style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.9/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(function () {
$('#FileUpload1').change(function () {
$('#Image1').hide();
var reader = new FileReader();
reader.onload = function (e) {
$('#Image1').show();
$('#Image1').attr("src", e.target.result);
$('#Image1').Jcrop({
onChange: SetCoordinates,
onSelect: SetCoordinates
});
}
reader.readAsDataURL($(this)[0].files[0]);
});
$('#btnCrop').click(function () {
var x1 = $('#imgX1').val();
var y1 = $('#imgY1').val();
var width = $('#imgWidth').val();
var height = $('#imgHeight').val();
var canvas = $("#canvas")[0];
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
canvas.height = height;
canvas.width = width;
context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
$('#imgCropped').val(canvas.toDataURL());
$('#btnUpload').show();
};
img.src = $('#Image1').attr("src");
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
$('#btnCrop').show();
};
</script>
</body>
</html>
Result:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.