你可以使用 jQuery插件jCrop来对图片进行
预览和裁剪，然后使用 ASP
.NET MVC的文件上传功能将裁剪后的
图片上传到服务器。
以下是大致的实现步骤：
1. 在视图中引入 jCrop 插件和 jQuery 库：
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/
ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" />
<script src="https://cdnjs.cloudflare.com/
ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"></script>
```
2. 在视图中显示待裁剪的图片：
```
<img src="path/to/image" id="crop-image" />
```
3. 使用 jCrop 插件初始化图片裁剪：
```
<script>
$(function () {
$('#crop-image').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>
```
4. 添
加表单元素用于提交裁剪的坐标：
```
<form method="post" action="Upload" enctype="multipart/form-data">
<input type="hidden" name="x" id="x" />
<input type="hidden" name="y" id="y" />
<input type="hidden" name="w" id="w" />
<input type="hidden" name="h" id="h" />
<input type="
file" name="
file" />
<input type="submit" value="Upload" />
</form>
```
5. 在控制器中实现文件上传和图片裁剪：
```
[HttpPost]
public ActionResult Upload(HttpPosted
FileBase
file, int x, int y, int w, int h)
{
if (
file != null &&
file.ContentLength > 0)
{
var
fileName = Path.Get
FileName(
file.
FileName);
var
filePath = Path.Combine(Server.MapPath("~/Uploads"),
fileName);
var img = Image.FromStream(
file.InputStream);
// 裁剪图片
var croppedImg = new Bitmap(w, h);
var g = Graphics.FromImage(croppedImg);
g.DrawImage(img, new Rectangle(0, 0, croppedImg.Width, croppedImg.Height), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
croppedImg.Save(
filePath);
return RedirectToAction("Index");
}
return View();
}
```
这样就可以在 ASP
.NET MVC 中实现图片
预览、裁剪和上传了。
本文介绍如何在ASP.NET MVC中结合Ajax实现多图片的上传，并在上传过程中进行预览。文章提到后台未对文件类型进行验证，实际应用时需要注意添加类型检查。
最低0.47元/天 解锁文章
777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
