Description : in this post how to upload image in folder. in this code use form data in jquery for upload image in folder front end html side use jquery code for upload image and c# code side create method that return result in json for successfully upload image
add file upload html control in your html
<input type="file" style="visibility: hidden;height:0"
id="Logo" name="Logo" accept=".png,.jpg,.jpeg,.gif,.tif" />
ajax call for upload image with parameter
function Save()
{
if (window.FormData !== undefined)
{
var fileUpload = $("#Logo").get(0);
var files = fileUpload.files;
// Create FormData object
var fileData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++)
{
fileData.append(files[i].name, files[i]);
}
// Adding one more key to FormData object
fileData.append('Parameter1', $("#Parameter1").val());
$.ajax({
url: '/YourControllerName/YourMethodName',
type: "POST",
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: fileData,
success: function (result)
{
alert(result);
},
error: function (err)
{
alert(err.statusText);
}
});
}
else
{
alert('FormData is not supported.');
}
}
below code for get image in .cs file side and proccess image like save image in folder and save record in database
public JsonResult Save()
{
string Parameter1 = Request.Form["Parameter1"].ToString()
if (Request.Files.Count > 0)
{
try
{
// Get all files from Request object
HttpFileCollectionBase files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFileBase file = files[i];
string FileName;
// Checking for Internet Explorer
if (Request.Browser.Browser.ToUpper() == "IE"
|| Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
{
string[] testfiles = file.FileName.Split(new char[] { '\\' });
FileName = testfiles[testfiles.Length - 1];
}
else
{
FileName = file.FileName;
}
FileInfo fInfo = new FileInfo(FileName);
FileName = Guid.NewGuid().ToString() + fInfo.Extension;
// Get the complete folder path and store the file inside it.
FileName = Path.Combine(Server.MapPath("~/YourImageFolderSavePath/"), FileName);
file.SaveAs(FileName);
}
}
catch (Exception ex)
{
return Json("Error occurred. Error details: " + ex.Message);
}
}
// WRITE YOUR SAVE RECORD CODE HERE
return Json("Image upload successfully.", JsonRequestBehavior.AllowGet);
}
add file upload html control in your html
<input type="file" style="visibility: hidden;height:0"
id="Logo" name="Logo" accept=".png,.jpg,.jpeg,.gif,.tif" />
ajax call for upload image with parameter
function Save()
{
if (window.FormData !== undefined)
{
var fileUpload = $("#Logo").get(0);
var files = fileUpload.files;
// Create FormData object
var fileData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++)
{
fileData.append(files[i].name, files[i]);
}
// Adding one more key to FormData object
fileData.append('Parameter1', $("#Parameter1").val());
$.ajax({
url: '/YourControllerName/YourMethodName',
type: "POST",
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: fileData,
success: function (result)
{
alert(result);
},
error: function (err)
{
alert(err.statusText);
}
});
}
else
{
alert('FormData is not supported.');
}
}
below code for get image in .cs file side and proccess image like save image in folder and save record in database
public JsonResult Save()
{
string Parameter1 = Request.Form["Parameter1"].ToString()
if (Request.Files.Count > 0)
{
try
{
// Get all files from Request object
HttpFileCollectionBase files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFileBase file = files[i];
string FileName;
// Checking for Internet Explorer
if (Request.Browser.Browser.ToUpper() == "IE"
|| Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
{
string[] testfiles = file.FileName.Split(new char[] { '\\' });
FileName = testfiles[testfiles.Length - 1];
}
else
{
FileName = file.FileName;
}
FileInfo fInfo = new FileInfo(FileName);
FileName = Guid.NewGuid().ToString() + fInfo.Extension;
// Get the complete folder path and store the file inside it.
FileName = Path.Combine(Server.MapPath("~/YourImageFolderSavePath/"), FileName);
file.SaveAs(FileName);
}
}
catch (Exception ex)
{
return Json("Error occurred. Error details: " + ex.Message);
}
}
// WRITE YOUR SAVE RECORD CODE HERE
return Json("Image upload successfully.", JsonRequestBehavior.AllowGet);
}