asp.net mvc 在服务器端上传图片，上传图片时要将图片在服务器端预览和裁剪然后再上传

在ASP.NET MVC中，可以使用jQuery插件如Jcrop或Cropper来实现图片预览和裁剪。具体的步骤如下：

1. 安装Jcrop或Cropper的jQuery插件。

2. 在视图中添加一个文件上传控件和一个用于预览裁剪后图片的img标签。

3. 在JavaScript中监听文件上传控件的change事件，获取上传的图片文件，将其显示在img标签中。

4. 使用Jcrop或Cropper插件对图片进行裁剪，获取裁剪后的图片数据。

5. 将裁剪后的图片数据上传至服务器端进行保存。

下面是一个简单的示例代码：

<!-- 在视图中添加文件上传控件和img标签 -->
<input type="file" id="uploadFile" />
<img src="" id="previewImg" />

<script>
    // 监听文件上传控件的change事件
    $('#uploadFile').on('change', function () {
        // 获取上传的图片文件
        var file = this.files[0];
        // 创建 FileReader 对象用于读取文件数据
        var reader = new FileReader();
        // 读取文件数据完成后的回调函数
        reader.onload = function (e) {
            // 将读取到的文件数据显示在img标签中
            $('#previewImg').attr('src', e.target.result);
            // 初始化Jcrop或Cropper插件
            $('#previewImg').Jcrop({
                // 配置插件参数，如裁剪框大小、比例等
            }, function () {
                // 获取裁剪后的图片数据
                var cropData = this.tellSelect();
                // 将裁剪后的图片数据上传至服务器端进行保存
                $.post('/Upload/Save', cropData, function (result) {
                    // 上传完成后的回调函数
                });
            });
        };
        // 读取文件数据
        reader.readAsDataURL(file);
    });
</script>

在服务器端需要编写一个控制器方法来接收裁剪后的图片数据并进行保存。具体的代码实现可以参考ASP.NET MVC官方文档或其他相关教程。