Asp.net MVC 实现图片上传剪切div代码

以下是一个简单的示例，演示如何在 Asp.net MVC 中上传和剪切图片：

在 View 中，添加一个包含上传表单和剪切区域的 HTML 代码：

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
}

<div id="image-container">
    <img src="" id="image-preview" />
</div>

在 Controller 中，添加一个 Upload 动作，用于处理上传请求：

[HttpPost]
public ActionResult Upload(HttpPostedFileBase file) {
    if (file != null && file.ContentLength > 0) {
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/App_Data"), fileName);
        file.SaveAs(path);
    }

    return RedirectToAction("Index");
}

在 View 中，添加 JavaScript 代码，用于显示上传的图片并启用剪切功能：

<script>
    $(function() {
        $('input[type="file"]').on('change', function() {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#image-preview').attr('src', e.target.result);
                $('#image-preview').cropper({
                    aspectRatio: 1,
                    crop: function(event) {
                        console.log(event.detail.x);
                        console.log(event.detail.y);
                        console.log(event.detail.width);
                        console.log(event.detail.height);
                    }
                });
            }
            reader.readAsDataURL(this.files[0]);
        });
    });
</script>

注意：上面的代码需要在页面中引入 cropper.js 和 cropper.css 文件。