Hi micah,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<style type="text/css">
.container
{
position: absolute;
top: 10%;
left: 10%;
right: 0;
bottom: 0;
}
.cropped > img
{
margin-right: 10px;
}
.imageBox
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid #aaa;
background: #fff;
overflow: hidden;
background-repeat: no-repeat;
cursor: move;
}
.imageBox .thumbBox
{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
box-sizing: border-box;
border: 1px solid rgb(102, 102, 102);
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
background: none repeat scroll 0% 0% transparent;
}
.imageBox .spinner
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
line-height: 400px;
background: rgba(0,0,0,0.7);
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="Script/JQuery-CropBox-min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var options = { thumbBox: '.thumbBox', spinner: '.spinner', imgSrc: 'avatar.png' }
var cropper = $('.imageBox').cropbox(options);
$('#file').on('change', function () {
$('#imgName').val($(this).val().split('\\')[$(this).val().split('\\').length - 1]);
var reader = new FileReader();
reader.onload = function (e) {
options.imgSrc = e.target.result;
cropper = $('.imageBox').cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
$('#btnCrop').on('click', function () {
var img = cropper.getDataURL();
$('#imgCropped').val(img);
$('.cropped').append('<img src="' + img + '">');
})
$('#btnZoomIn').on('click', function () { cropper.zoomIn(); })
$('#btnZoomOut').on('click', function () { cropper.zoomOut(); })
});
</script>
</div>
<div class="container">
<input type="hidden" name="imgCropped" id="imgCropped" />
<input type="hidden" name="imgName" id="imgName" />
<input type="file" id="file" />
<br />
<br />
<input type="button" id="btnZoomIn" value="+" />
<input type="button" id="btnZoomOut" value="-" />
<input type="button" id="btnCrop" value="Crop" />
<br />
<br />
<div class="imageBox">
<div class="thumbBox">
</div>
</div>
<br />
<br />
<div class="cropped">
</div>
<asp:Button Text="Upload" OnClick="Upload" runat="server" />
</div>
</form>
</body>
</html>
Namespaces
C#
using System.IO;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.IO
Imports System.Data.SqlClient
Code
C#
protected void Upload(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request.Form["imgCropped"]))
{
string base64 = Request.Form["imgCropped"].Split(',')[1];
string imageName = Request.Form["imgName"];
byte[] bytes = Convert.FromBase64String(base64);
string filePath = "~/PROFILEPHOTOS/" + imageName;
using (FileStream stream = new FileStream(Server.MapPath(filePath), FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
SqlCommand cmd = new SqlCommand("INSERT INTO tblFilePath VALUES(@ImageName,@Path)", con);
cmd.CommandType = System.Data.CommandType.Text;
cmd.Parameters.AddWithValue("@ImageName", imageName);
cmd.Parameters.AddWithValue("@Path", filePath);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
VB.Net
Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
If Not String.IsNullOrEmpty(Request.Form("imgCropped")) Then
Dim base64 As String = Request.Form("imgCropped").Split(","c)(1)
Dim imageName As String = Request.Form("imgName")
Dim bytes As Byte() = Convert.FromBase64String(base64)
Dim filePath As String = "~/PROFILEPHOTOS/" & imageName
Using stream As FileStream = New FileStream(Server.MapPath(filePath), FileMode.Create)
stream.Write(bytes, 0, bytes.Length)
stream.Flush()
End Using
Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
Dim cmd As SqlCommand = New SqlCommand("INSERT INTO tblFilePath VALUES(@ImageName,@Path)", con)
cmd.CommandType = System.Data.CommandType.Text
cmd.Parameters.AddWithValue("@ImageName", imageName)
cmd.Parameters.AddWithValue("@Path", filePath)
con.Open()
cmd.ExecuteNonQuery()
con.Close()
End If
End Sub
Screenshot
So you need to modify the code as per your requirement.
