Image upload and preview
HTML
<form id="form1" runat="server">
<input type='file' id="inputFile" />
</form>
<div class="new">
</div>
JavaScript
function readURL() {
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"];
for(var i = 0; i < fileList.length; i++){
var file_allow = fileList[i];
var fileType = file_allow["type"];
if ($.inArray(fileType, ValidImageTypes) > 0) {
var objectUrl = anyWindow.createObjectURL(fileList[i]);
var ran_x = Math.floor((Math.random() * 1000000000000) + 1);
$('.new').append('<div class="my-img-div" style="width:auto; display:inline-block;" ><img src="' + objectUrl + '" class="my-img" id="" /></div>');
window.URL.revokeObjectURL(fileList[i]);
}
}
}
var inputfile= document.getElementById("inputFile");
inputfile.addEventListener("change",readURL,false);