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."); } }