HTML FileBrowser Image Preview
Wednesday, February 3, 2016 Category : ASP.NET, ASP.NET MVC, Jquery 0
HTML
<div class="form-group">
<label class="control-label col-md-3" for="inputWarning"> Image 1 </label>
<div class="col-md-4">
<input id="exampleInputFile1" name="ImagePath" type="file">
<b>Live Preview</b>
<br />
<div id="dvPreview1">
</div>
</div>
</div>
Java Script
window.onload = function () {
LoadTempData();
var fileBrowser = document.getElementById("exampleInputFile1");
fileBrowser.onchange = function () {
LoadImage('1', fileBrowser);
}
var fileBrowser2 = document.getElementById("exampleInputFile2");
fileBrowser2.onchange = function () {
LoadImage('2', fileBrowser2);
}
var fileBrowser3 = document.getElementById("exampleInputFile3");
fileBrowser3.onchange = function () {
LoadImage('3', fileBrowser3);
}
var fileBrowser4 = document.getElementById("exampleInputFile4");
fileBrowser4.onchange = function () {
LoadImage('4', fileBrowser4);
}
var fileBrowser5 = document.getElementById("exampleInputFile5");
fileBrowser5.onchange = function () {
LoadImage('5', fileBrowser5);
}
};
function LoadImage(idNo, fileBrowser)
{
if (typeof (FileReader) != "undefined") {
var dvPreview = document.getElementById("dvPreview" + idNo);
dvPreview.innerHTML = "";
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
for (var i = 0; i < fileBrowser.files.length; i++) {
var file = fileBrowser.files[i];
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
//var img = document.createElement("IMG");
//img.height = "100";
//img.width = "100";
//img.src = e.target.result;
//dvPreview.appendChild(img);
var image = new Image();
image.src = e.target.result;
image.onload = function () {
if(image.width != 680 || image.height!=850)
{
alert('Image size not valid');
//debugger;
//fileBrowser.outerHTML = fileBrowser.outerHTML;
//$('#' + id).html($('#' + id).html());
fileBrowser.value = "";
} else {
image.height = "100";
image.width = "150";
//img.src = e.target.result;
dvPreview.appendChild(image);
}
};
}
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image file.");
dvPreview.innerHTML = "";
return false;
}
}
} else {
alert("This browser does not support HTML10 FileReader.");
}
}