Please refer below code.
HTML
<div>
<style type="text/css">
#dvPreview1, #dvPreview2
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
height: 100px;
width: 100px;
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload1").change(function () {
$("#dvPreview1").html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#dvPreview1").show();
$("#dvPreview1")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#dvPreview1").show();
$("#dvPreview1").append("<img />");
var reader = new FileReader();
reader.onload = function (e) {
$("#dvPreview1 img").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
$("#fileupload2").change(function () {
$("#dvPreview2").html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#dvPreview2").show();
$("#dvPreview2")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#dvPreview2").show();
$("#dvPreview2").append("<img />");
var reader = new FileReader();
reader.onload = function (e) {
$("#dvPreview2 img").attr("src", e.target.result).css('width', '250px').css('height', '250px');
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
<% using (Html.BeginForm("CompareImage", "Compare", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
%>
<input id="fileupload1" type="file" name="file1" />
<input id="fileupload2" type="file" name="file2" />
<hr />
<div id="dvPreview1">
</div>
<div id="dvPreview2">
</div>
<br />
<input type="submit" value="Compare" />
<%} %>
</div>
CompareController(Controller)
public ActionResult Index()
{
return View();
}
public ActionResult CompareImage()
{
HttpFileCollectionBase hfc = HttpContext.Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFileBase hpf = hfc[i];
if (hpf.ContentLength > 0)
{
string fileName = "";
if (Request.Browser.Browser == "IE")
{
fileName = Path.GetFileName(hpf.FileName);
}
else
{
fileName = hpf.FileName;
}
using (MemoryStream ms = new MemoryStream())
{
hpf.InputStream.CopyTo(ms);
byte[] array = ms.GetBuffer();
}
}
}
// Write code to Compare two Face Images
return View("Index");
}
Refer below links to compare two face images
- http://stackoverflow.com/questions/23931/algorithm-to-compare-two-images
- http://www.codeproject.com/Questions/719844/How-to-compare-two-images-using-OpenCV-or-EmguCV-f
I hope this will help you out.