<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<title>Brandoncode</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var imgDisplay = "";
$("#imageName").val(imgDisplay);
var Url = '/Home/UploadFiles';
$('#file').change(function () {
var formData = new FormData();
var file = document.getElementById("file").files[0];
formData.append("file", file);
$.ajax({
url: Url,
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function (result) {
$('#fileNames').load(imageList());
$("#imgPreview").attr('src', result);
setTimeout(function () {
imageList(recordId, imgDisplay);
location.reload();
}, 6000);
$('#messageDialog').val("Upload photo successfully");
},
});
});
imageList();
function imageList() {
var UrlAddress = "";
var fileExt = {};
var filename;
fileExt[0] = ".png";
fileExt[1] = ".PNG";
fileExt[2] = ".jpg";
fileExt[3] = ".JPG";
fileExt[4] = ".gif";
fileExt[5] = ".GIF";
UrlAddress = "http://localhost:97/TestFolder/";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: UrlAddress,
success: function (data) {
//List all png or jpg or gif file names in the page
$(data).find("a:contains(" + fileExt[0] + "),a:contains(" + fileExt[1] + "),a:contains(" + fileExt[2] + "),a:contains(" + fileExt[3] + "),a:contains(" + fileExt[4] + "),a:contains(" + fileExt[5] + ")").each(function () {
filename = this.href.replace(window.location.host, "").replace("http:///", "http://localhost:97/");
var imageName = filename.split('\\').pop().split('/').pop();
$("#leftNav").append("<img src='" + filename + "' data-ng-model='imgDisplay' style='width:60px;height:50px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' align='center' alt='" + filename.split("/").pop(-1) + "' title='" + filename.split("/").pop(-1) + "' onclick='showImage(\"" + filename + "\",\"" + filename.split("/").pop(-1) + "\");'/>");
});
+$("#rightDisplay").append("<img id='currentImg' src='" + imgDisplay + "' style='width:500px;height:300px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' alt='' title=''/></div>")
$('#loading-image').hide();
}
});
}
});
function showImage(imgName, imgText) {
var curImage = document.getElementById('currentImg');
curImage.src = imgName;
curImage.alt = imgName;
curImage.title = imgName;
document.getElementById('imageName').value = curImage.alt;
textDiv.innerHTML = imgText;
}
function fileCheck(obj) {
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'JPEG', 'JPG', 'PNG', 'GIF', 'BMP'];
if ($.inArray($(obj).val().split('.').pop().toLowerCase(), fileExtension) === -1) {
alert("Only '.jpeg','.jpg', '.png', '.gif', '.bmp' formats are allowed.");
}
}
</script>
<style>
.verticalhorizontal {
display: table-cell;
height: 300px;
text-align: center;
width: 300px;
vertical-align: middle;
}
</style>
<style>
div.polaroid {
width: 75%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: left;
padding: 5px;
}
div.container {
width: 85%;
padding: 10px;
}
</style>
<script>
$(window).load(function () {
$('#loading').hide();
});
</script>
</head>
<body topmargin="0" leftmargin="0">
<br />
<br />
<input type="hidden" id="action" />
<input type="hidden" id="profileImage" style="width:450px" />
<div id="adbox" align="center">
<div align="center"><h4>Ajax Upload</h4></div>
<div class="polaroid">
<form action="/Home/UploadFiles" enctype="multipart/form-data" method="post">
<table border="0" width="80%">
<tr>
<td>
<div class="form-group">
<table border="0" width="70%" align="center">
<tr>
<td width="20%" align="left"></td>
<td width="80%" align="center">
<div><input type="file" name="file" id="file" onchange="fileCheck(this);" class="form-control input-sm" style='width:500px;height:40px;font-size:12px;' /></div>
</td>
</tr>
<tr>
<td width="20%" align="left"></td>
<td width="80%" align="center"> Files Types (.png, jpg, gif)</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
<table border="0" width="80%">
<tr>
<td width="30%" valign="top">
<div id="thumbs" align="center">
<div id="leftNav"></div>
</div>
</td>
<td width="70%">
<table width="100%" border="0">
<tr>
<td>
<div class="thumbnail">
<div id="rightDisplay" align="center"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</body>
</html>