Hi micah,
Refer below sample.
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:DropDownList runat="server" ID="ddlId">
<asp:ListItem Text="Select" />
<asp:ListItem Text="1" />
<asp:ListItem Text="2" />
<asp:ListItem Text="3" />
<asp:ListItem Text="4" />
</asp:DropDownList>
<asp:Button Text="Upload" OnClick="Upload" runat="server" />
<br />
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Image Id" />
<asp:BoundField DataField="ImageName" HeaderText="Name" />
<asp:ImageField DataImageUrlField="Path" HeaderText="Image" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.IO;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
VB.Net
Imports System.IO
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Data
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
BindGrid();
}
}
private void BindGrid()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
SqlCommand cmd = new SqlCommand("SELECT Id,ImageName,Path FROM tblFilePathTest", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
gvImages.DataSource = dt;
gvImages.DataBind();
}
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("UPDATE tblFilePathTest SET ImageName = @ImageName , Path = @Path WHERE Id =@Id", con);
cmd.CommandType = System.Data.CommandType.Text;
cmd.Parameters.AddWithValue("@Id", ddlId.SelectedItem.Text);
cmd.Parameters.AddWithValue("@ImageName", imageName);
cmd.Parameters.AddWithValue("@Path", filePath);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
BindGrid();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)Handle Me.Load
If Not Me.IsPostBack Then
BindGrid()
End If
End Sub
Private Sub BindGrid()
Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
Dim cmd As SqlCommand = New SqlCommand("SELECT Id,ImageName,Path FROM tblFilePathTest", con)
Dim da As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
da.Fill(dt)
gvImages.DataSource = dt
gvImages.DataBind()
End Sub
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("UPDATE tblFilePathTest SET ImageName = @ImageName , Path = @Path WHERE Id =@Id", con)
cmd.CommandType = System.Data.CommandType.Text
cmd.Parameters.AddWithValue("@Id", ddlId.SelectedItem.Text)
cmd.Parameters.AddWithValue("@ImageName", imageName)
cmd.Parameters.AddWithValue("@Path", filePath)
con.Open()
cmd.ExecuteNonQuery()
con.Close()
BindGrid()
End If
End Sub
Screenshot
