[jQuery] <input type= 'file' 이미지 선택 시 미리보기 구현

$('input[name="file_path"]').change(function(){
    setImageFromFile(this, '#preview');
});

function setImageFromFile(input, expression) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
    $(expression).attr('src', e.target.result);
  }
  reader.readAsDataURL(input.files[0]);
  }
}

input file 에서 파일이 선택되면 onchange 가 동작 

file 객체를 담아서 filereader 를 호출 및 이미지를 계산

<img src="" id="preview"/>
<input type="file" name="file_path" class="files" style="width: 270px; height: 46px;">