Загрузка изображения через type=file

document.addEventListener('DOMContentLoaded', e => { 
  let file = document.querySelector('#file'),        // Выбираем нужные 
      preview = document.querySelector('#preview');  // элементы 
   
  file.addEventListener('change', e => { // При изменении input 
    if(file.files.length === 0) // Если ничего не выбрано - выходим 
      return; 
     
    let f = file.files[0],     // Берём первый файл 
        fr = new FileReader(); // Создаём объект чтения файлов 
     
    // В свойсте type mime (что-то типа image/png) 
    if(f.type.indexOf('image') === -1) // Если файл не является изображением - выходим 
      return; 
     
    fr.onload = e => { 
      if(getComputedStyle(preview, null).display === 'none') // Если нужно - показываем img 
        preview.style.display = 'block'; 
       
      preview.src = e.target.result; // В src будет что-то типа data:image/jpeg;base64,.... 
    } 
    fr.readAsDataURL(f); // Читаем blob выбранного файла 
  }); 
});

#preview{ 
  display: none; 
}

<input type='file' id='file' /><br /><br /> 
<img src='' id='preview' />

$(document).on('ready', function(){ 
  function readURL(input) { 
 
    if (input.files && input.files[0]) { 
        var reader = new FileReader(); 
 
        reader.onload = function (e) { 
            $('#image').attr('src', e.target.result); 
        }; 
 
        reader.readAsDataURL(input.files[0]); 
    } 
  } 
 
  $("#imgInput").change(function(){ 
    readURL(this); 
  }); 
});

.input-file-row-1:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
 
.input-file-row-1{ 
    display: inline-block; 
	margin-top: 25px; 
	position: relative; 
} 
 
html[xmlns] .input-file-row-1{ 
    display: block; 
} 
 
* html .input-file-row-1 { 
    height: 1%; 
} 
 
.upload-file-container {  
	position: relative;  
	width: 100px;  
	height: 137px;  
	overflow: hidden;	 
	background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat; 
	float: left; 
	margin-left: 23px; 
}  
 
.upload-file-container:first-child {  
	margin-left: 0; 
}  
 
.upload-file-container > img { 
	width: 93px; 
	height: 93px; 
	border-radius: 5px; 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
} 
 
.upload-file-container-text{ 
	font-family: Arial, sans-serif; 
	font-size: 12px; 
	color: #719d2b; 
	line-height: 17px; 
	text-align: center; 
	display: block; 
	position: absolute;  
	left: 0;  
	bottom: 0;  
	width: 100px;  
	height: 35px; 
} 
 
.upload-file-container-text > span{ 
	border-bottom: 1px solid #719d2b; 
	cursor: pointer; 
} 
 
.upload-file-container input  {  
	position: absolute;  
	left: 0;  
	bottom: 0;  
	font-size: 1px;  
	opacity: 0; 
	filter: alpha(opacity=0);	 
	margin: 0;  
	padding: 0;  
	border: none;  
	width: 70px;  
	height: 50px;  
	cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form name="" method="post" action="#" enctype="multipart/form-data" class="feedback-form-1"> 
				<fieldset> 
										 
					<div class="input-file-row-1"> 
					 
						<div class="upload-file-container"> 
							<img id="image" src="#" alt="" />						 
							<div class="upload-file-container-text"> 
								<span>Add<br />photo</span> 
								<input type="file" name="pic[]" class="photo" id="imgInput" /> 
							</div> 
						</div>				 
										 
					</div>			 
				</fieldset> 
			</form>