ASP.NET MVC4使用JCrop裁剪图片并上传
时间: 2023-09-20 21:08:11 浏览: 49
ASP.NET MVC4中可以使用JCrop插件进行图片裁剪,并通过Ajax上传裁剪后的图片。以下是实现步骤:
1. 引入JCrop插件和jQuery库。
2. 在视图中添加一个图片标签和一个用于显示裁剪后图片的标签。
```html
<div>
<img src="原始图片路径" id="crop-img" />
</div>
<div>
<img src="" id="crop-result" />
</div>
```
3. 在JavaScript中初始化JCrop插件。
```javascript
$(function() {
$('#crop-img').Jcrop({
aspectRatio: 1, // 宽高比
onSelect: updateCoords // 选择区域后的回调函数
});
});
```
4. 编写回调函数updateCoords,获取裁剪后的坐标值。
```javascript
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
```
5. 添加表单,包含用于保存坐标值的隐藏输入框和一个上传按钮。
```html
<form id="crop-form" method="post" enctype="multipart/form-data">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="file" id="file" name="file" />
<button type="submit" id="submit">上传</button>
</form>
```
6. 绑定上传按钮点击事件,在点击上传按钮时使用Ajax上传裁剪后的图片。
```javascript
$('#submit').click(function() {
var formData = new FormData($('#crop-form')[0]);
$.ajax({
type: 'post',
url: '上传图片的URL',
data: formData,
processData: false,
contentType: false,
success: function(data) {
$('#crop-result').attr('src', '上传后的图片路径');
},
error: function() {
alert('上传失败');
}
});
return false;
});
```
以上就是使用JCrop插件进行图片裁剪并上传的步骤。