I succefully cropped images using this jquery but how do i sve the image in folder called UserImages then save the imageName to database
<head runat="server">
<title></title>
<link href="Lightweight-Image-Cropping-Plugin-with-jQuery-Cropbox/src/jquery.cropbox.css"
rel="stylesheet" />
<link href="Script/default%20css/AdminLTE-2.2.0/bootstrapDefault/css/bootstrap.min.css"
rel="stylesheet" />
<link href="Script/dist/css/AdminLTE.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="container" style="margin-top: 60px">
<div class="">
<div id="demo" class="cropbox">
<!-- Crop area -->
<div class="col-lg-6">
<div class="workarea-cropbox" style="">
<div class="bg-cropbox" style="width: 400px">
<img class="image-cropbox" style="">
<div class="membrane-cropbox">
</div>
</div>
<div class="frame-cropbox">
<div class="resize-cropbox">
</div>
</div>
</div>
</div>
<!-- Crop buttons -->
<div class="col-lg-6">
<!-- Cropped image -->
<div class="cropped panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Result of cropping</h3>
</div>
<span class="panel-body"><span style="margin-left: 8px">... </span></span>
</div>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-default">Banners</asp:LinkButton>
<div class="btn-group ">
<span class="btn btn-primary btn-file"><i class="glyphicon glyphicon-folder-open"></i>
Browse
<input type="file" accept="image/*">
</span>
<button type="button" class="btn btn-success btn-crop">
<i class="glyphicon glyphicon-scissors"></i>Crop
</button>
<button type="button" class="btn btn-warning btn-reset">
<i class="glyphicon glyphicon-repeat"></i>Reset
</button>
</div>
<!-- Info of cropping -->
<div class="form-group" style="visibility: hidden">
<label>
Info of cropping</label>
<textarea class="data form-control" rows="5"></textarea>
</div>
<!-- jQuery 2.1.4 -->
<script src="Script/default%20css/AdminLTE-2.2.0/pluginsdefault/jQuery/jQuery-2.1.4.min.js"></script>
</div>
</div>
<script src="Lightweight-Image-Cropping-Plugin-with-jQuery-Cropbox/src/jquery.cropbox.js"></script>
<script type="text/javascript">
$('#demo').cropbox({
selectors: {
inputInfo: '#demo textarea.data',
inputFile: '#demo input[type="file"]',
btnCrop: '#demo .btn-crop',
btnReset: '#demo .btn-reset',
resultContainer: '#demo .cropped .panel-body',
messageBlock: '#message'
},
imageOptions: {
class: 'img-thumbnail',
style: 'margin-right: 5px;margin-left: 8px; margin-bottom: 5px; '
},
variants: [{
width: 400,
height: 400,
minWidth: 180,
minHeight: 200,
maxWidth: 350,
maxHeight: 350
}, {
}],
messages: [
'Crop a middle image.',
'Crop a small image.'
]
});
</script>
</div>
<div class="col-lg-6">
</div>
</div>
</form>
</body>
</html>
