XMLHttpRequest ile Resim Kaydetme

Resim yükleyip göstermek istediğimizde sayfada tekrar yükleme yapılmasını istemediğimiz durumlarda aşağıdaki yapıyı kullanabiliriz.

Controller;

[HttpPost]
public JsonResult Upload(string Url)
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i]; //Uploaded file
//Use the following properties to get file's name, size and MIMEType
int fileSize = file.ContentLength;
string fileName = file.FileName;
string mimeType = file.ContentType;
System.IO.Stream fileContent = file.InputStream;
//To save file, use SaveAs method
file.SaveAs(Server.MapPath("~/Content/") + fileName); //File will be saved in application root
}
return Json("Uploaded " + Request.Files.Count + " files");
}

Script;
<script>
 $(document).ready(function () {

 $("#fileInput").change(function () {
 var formdataDP = new FormData();
 var fileInputDP = document.getElementById('fileInput');
 if (fileInputDP.files.length > 0) {
 for (i = 0; i < fileInputDP.files.length; i++) {
 formdataDP.append(fileInputDP.files[i].name, fileInputDP.files[i]);
 }
 var xhr1 = new XMLHttpRequest();
 xhr1.open('POST', '@Url.Action("Upload", "Home")');
 xhr1.send(formdataDP);
 xhr1.onreadystatechange = function () {
 if (xhr1.readyState == 4 && xhr1.status == 200) {
 $("#profileimage").attr("src", "@Url.Content("~/Content/")" + fileInputDP.files[0].name);
 }
 }
 }
 else { alert("lutfen_bir_dosya_seciniz"); }
 });

 });
</script>

Style;
<style type="text/css" media="screen">
.third-effect .mask{ position: absolute;overflow: hidden;top: 0;left: 0;}
.third-effect img { display: block;position: relative;}
.third-effect a.info { background:url(@Url.Content("/images/upload.png")) center no-repeat;display: inline-block;text-decoration: none;padding:0;text-indent:-9999px;width:90px;height:90px;}
.third-effect { float: left;overflow: hidden;position: relative;text-align: center;box-shadow: 0px 0px 5px #aaa;cursor: default;}
.third-effect .mask { width: 90px; height: 90px; opacity: 0; overflow:visible;border:39px solid rgba(0,0,0,0.7);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.third-effect a.info { left: -39px; position:relative;top:-39px;opacity: 0;-webkit-transition: opacity 0.5s 0s ease-in-out;-moz-transition: opacity 0.5s 0s ease-in-out;-o-transition: opacity 0.5s 0s ease-in-out;-ms-transition: opacity 0.5s 0s ease-in-out;transition: opacity 0.5s 0s ease-in-out;}
.third-effect:hover .mask { opacity: 1;border:39px solid rgba(0,0,0,0.7);}
.third-effect:hover a.info { opacity:1;-moz-transition-delay: 0.1s;-webkit-transition-delay: 0.1s;-o-transition-delay: 0.1s;-ms-transition-delay: 0.1s;transition-delay: 0.1s;}
#fileInput{width: 90px;height: 90px;z-index: 100;position: absolute;left: 0px;top: 0px;-webkit-appearance: none;opacity: 0;}
</style>

CSHTML
<div class="third-effect">
 <img id="profileimage" src="" width="90" height="90" style="cursor: pointer">
 <div class="mask" style="cursor: pointer">
 <a href="#" class="info"><input name="fileInput" id="fileInput" type="file" /></a>
 </div>
</div>