========================================================================
Html code
========================================================================
<input type="file" style="right: -8px; bottom: 40px; width: 11px; position: absolute; display: block; opacity: 0;"id="file_upload" name="file_upload" onchange="return SaveImage(this);">
<a href="javascript:openFileSelector()" class="edit transition" /><i></i>
========================================================================
Upload Image and crop using Handler and javascript
========================================================================
<script type="text/javascript">
function openFileSelector() {
document.getElementById("file_upload").click();
}
function SaveImage(input) {
show_progress();
setTimeout(function () {
var fileUpload1 = $(input).get(0);
var files1 = fileUpload1.files;
if (files1.length > 0) {
var D_Name1 = fileUpload1.files[0].name;
if ((D_Name1 != null) || (D_Name1 != "")) {
var FileExtension1 = checkFileExtension(D_Name1);
if (FileExtension1 == 'png' || FileExtension1 == 'jpg' || FileExtension1 == 'jpeg') {
var size = parseFloat($("#file_upload")[0].files[0].size / 1024).toFixed(2);
if (size > 1024 || size < 5) {
swal("Your image size " + size + " KB.\n" + "Please upload image between 5 KB - 1 MB Size ");
hide_progress();
return false;
}
else {
var data1 = new FormData();
for (var i = 0; i < files1.length; i++) {
data1.append(files1[i].name, files1[i]);
}
$.ajax({
type: 'POST',
processData: false,
contentType: false,
cache: true,
data: data1,
async: false,
url: "/Content/Handler/UploadImage.ashx?files=" + D_Name1,
success: function (response) {
if (response == null) {
return false;
hide_progress();
}
else {
debugger
var a = "/Content/Upload/ResizeImage/" + response;
$('#abc').attr('src', a);
$('#imguserprofile').attr('src', a);
SaveImageName(response);
}
}
});
}
}
else {
$("#endTimeLabel").text('');
swal(FileExtension1 + ' File type is not supported');
hide_progress();
return false;
}
}
}
}, 2000);
}
function checkFileExtension(_input) {
var FileExtension = _input.substring(_input.lastIndexOf('.') + 1).toLowerCase();
return FileExtension;
}
function SaveImageName(ImageName) {
var url = "/LegalDocument/saveImageName/";
$.ajax({
url: url,
data: { ImageName: ImageName },
cache: false,
type: "POST",
async: false,
success: function (data) {
hide_progress();
},
error: function (reponse) {
swal("error : " + reponse);
hide_progress();
}
});
}
</script>
========================================================================
Create a ashx extention file like thise: Downloadattatchment.ashx
========================================================================
public class UploadImage : IHttpHandler
{
string SetDoc = "";
string filename = string.Empty;
string Tempfilename = string.Empty;
private static Random RNG = new Random();
public string Create16DigitString()
{
System.Text.StringBuilder builder = new System.Text.StringBuilder();
while (builder.Length < 16)
{
builder.Append(RNG.Next(10).ToString());
}
return builder.ToString();
}
public void ProcessRequest(HttpContext context)
{
{
context.Response.ContentType = "text/plain";
context.Response.Expires = -1;
try
{
string TempName = "";
string filePath = "";
string files = context.Request.QueryString["files"];
HttpFileCollection postedFiles = context.Request.Files;
string[] a = postedFiles.AllKeys;
int TemppostedFiles = postedFiles.Count;
string[] SplitFiles = files.Split('*');
for (int i = 0; i < TemppostedFiles; i++)
{
string TempData = SplitFiles[i].ToString();
string temp = a[i].ToString();
for (int j = 0; j < TemppostedFiles; j++)
{
if (TempData == a[j].ToString())
{
TempName = DateTime.Now.ToString("yyyyddMMmmss");
filePath = context.Server.MapPath("~/Content/Upload/FullSizeUserImage/" + TempName + "_" + i + TempData);
postedFiles[i].SaveAs(filePath);
SetDoc = SetDoc + "#" + TempName + "_" + i + postedFiles[j].FileName;
System.Drawing.Image imgMediumSize = System.Drawing.Image.FromFile(filePath);
Image convertedImage = ResizeImage(imgMediumSize, 220, 196);
// imgMediumSize = resizeImageLeftSideProfilePic(imgMediumSize);
string pathMiddleSizeUserImage = context.Server.MapPath("~/Content/Upload/ResizeImage/" + TempName + "_" + i + TempData);
convertedImage.Save(pathMiddleSizeUserImage);
// imgMediumSize.Save(pathMiddleSizeUserImage);
}
//context.Response.Write(filename_img_165px_165px);
}
}
SetDoc = SetDoc.Remove(0, 1);
context.Response.Write(SetDoc);
}
catch (Exception)
{
context.Response.Write(SetDoc);
}
}
}
static Image ResizeImage(Image image, int desWidth, int desHeight)
{
int x, y, w, h;
if (image.Height > image.Width)
{
// w = (image.Width * desHeight) / image.Height;
h = (image.Height * desWidth) / image.Width;
w = desWidth;
y = 0;
x = 0;
}
else
{
h = desHeight;
w = (image.Width * desHeight) / image.Height;
// h = (image.Height * desWidth) / image.Width;
y = 0;
x = 0;
}
var bmp = new Bitmap(w, h);
using (Graphics g = Graphics.FromImage(bmp))
{
g.CompositingQuality = CompositingQuality.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(image, x, y, w, h);
}
return bmp;
}
public bool IsReusable
{
get
{
return false;
}
}
}
Html code
========================================================================
<input type="file" style="right: -8px; bottom: 40px; width: 11px; position: absolute; display: block; opacity: 0;"id="file_upload" name="file_upload" onchange="return SaveImage(this);">
<a href="javascript:openFileSelector()" class="edit transition" /><i></i>
========================================================================
Upload Image and crop using Handler and javascript
========================================================================
<script type="text/javascript">
function openFileSelector() {
document.getElementById("file_upload").click();
}
function SaveImage(input) {
show_progress();
setTimeout(function () {
var fileUpload1 = $(input).get(0);
var files1 = fileUpload1.files;
if (files1.length > 0) {
var D_Name1 = fileUpload1.files[0].name;
if ((D_Name1 != null) || (D_Name1 != "")) {
var FileExtension1 = checkFileExtension(D_Name1);
if (FileExtension1 == 'png' || FileExtension1 == 'jpg' || FileExtension1 == 'jpeg') {
var size = parseFloat($("#file_upload")[0].files[0].size / 1024).toFixed(2);
if (size > 1024 || size < 5) {
swal("Your image size " + size + " KB.\n" + "Please upload image between 5 KB - 1 MB Size ");
hide_progress();
return false;
}
else {
var data1 = new FormData();
for (var i = 0; i < files1.length; i++) {
data1.append(files1[i].name, files1[i]);
}
$.ajax({
type: 'POST',
processData: false,
contentType: false,
cache: true,
data: data1,
async: false,
url: "/Content/Handler/UploadImage.ashx?files=" + D_Name1,
success: function (response) {
if (response == null) {
return false;
hide_progress();
}
else {
debugger
var a = "/Content/Upload/ResizeImage/" + response;
$('#abc').attr('src', a);
$('#imguserprofile').attr('src', a);
SaveImageName(response);
}
}
});
}
}
else {
$("#endTimeLabel").text('');
swal(FileExtension1 + ' File type is not supported');
hide_progress();
return false;
}
}
}
}, 2000);
}
function checkFileExtension(_input) {
var FileExtension = _input.substring(_input.lastIndexOf('.') + 1).toLowerCase();
return FileExtension;
}
function SaveImageName(ImageName) {
var url = "/LegalDocument/saveImageName/";
$.ajax({
url: url,
data: { ImageName: ImageName },
cache: false,
type: "POST",
async: false,
success: function (data) {
hide_progress();
},
error: function (reponse) {
swal("error : " + reponse);
hide_progress();
}
});
}
</script>
========================================================================
Create a ashx extention file like thise: Downloadattatchment.ashx
========================================================================
public class UploadImage : IHttpHandler
{
string SetDoc = "";
string filename = string.Empty;
string Tempfilename = string.Empty;
private static Random RNG = new Random();
public string Create16DigitString()
{
System.Text.StringBuilder builder = new System.Text.StringBuilder();
while (builder.Length < 16)
{
builder.Append(RNG.Next(10).ToString());
}
return builder.ToString();
}
public void ProcessRequest(HttpContext context)
{
{
context.Response.ContentType = "text/plain";
context.Response.Expires = -1;
try
{
string TempName = "";
string filePath = "";
string files = context.Request.QueryString["files"];
HttpFileCollection postedFiles = context.Request.Files;
string[] a = postedFiles.AllKeys;
int TemppostedFiles = postedFiles.Count;
string[] SplitFiles = files.Split('*');
for (int i = 0; i < TemppostedFiles; i++)
{
string TempData = SplitFiles[i].ToString();
string temp = a[i].ToString();
for (int j = 0; j < TemppostedFiles; j++)
{
if (TempData == a[j].ToString())
{
TempName = DateTime.Now.ToString("yyyyddMMmmss");
filePath = context.Server.MapPath("~/Content/Upload/FullSizeUserImage/" + TempName + "_" + i + TempData);
postedFiles[i].SaveAs(filePath);
SetDoc = SetDoc + "#" + TempName + "_" + i + postedFiles[j].FileName;
System.Drawing.Image imgMediumSize = System.Drawing.Image.FromFile(filePath);
Image convertedImage = ResizeImage(imgMediumSize, 220, 196);
// imgMediumSize = resizeImageLeftSideProfilePic(imgMediumSize);
string pathMiddleSizeUserImage = context.Server.MapPath("~/Content/Upload/ResizeImage/" + TempName + "_" + i + TempData);
convertedImage.Save(pathMiddleSizeUserImage);
// imgMediumSize.Save(pathMiddleSizeUserImage);
}
//context.Response.Write(filename_img_165px_165px);
}
}
SetDoc = SetDoc.Remove(0, 1);
context.Response.Write(SetDoc);
}
catch (Exception)
{
context.Response.Write(SetDoc);
}
}
}
static Image ResizeImage(Image image, int desWidth, int desHeight)
{
int x, y, w, h;
if (image.Height > image.Width)
{
// w = (image.Width * desHeight) / image.Height;
h = (image.Height * desWidth) / image.Width;
w = desWidth;
y = 0;
x = 0;
}
else
{
h = desHeight;
w = (image.Width * desHeight) / image.Height;
// h = (image.Height * desWidth) / image.Width;
y = 0;
x = 0;
}
var bmp = new Bitmap(w, h);
using (Graphics g = Graphics.FromImage(bmp))
{
g.CompositingQuality = CompositingQuality.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(image, x, y, w, h);
}
return bmp;
}
public bool IsReusable
{
get
{
return false;
}
}
}