업로드하는 동안 이미지를 표시

Question

나는이 질문을하기 전에 물어 보았지만 실제 해결책을 얻지 못했습니다. 소셜 웹 사이트를 개발 중입니다. 사용자 등록 페이지에서 사용자가 사진을 추가 할 수 있습니다. 내 문제는 양식의 끝에있는 제출 버튼을 클릭하기 전에 사용자가 div에 업로드 한 이미지를 표시하고 싶습니다. 나는 많은 것을 수색했지만 올바른 것을 얻을 수 없었습니다.

내 HTML 코드는 다음과 같다 :

<img src="<?php echo $row_picture;?>" name="picture" class="settingspic" width="75" height="91" alt="profile pic" name="picture"/><a href="" onclick="return uploadimg()"> Upload</a></li> 
<input type="file" name="file" id="file" style="display:none;" /> 

내 자바 스크립트 코드는 다음과 같습니다

function uploadimg() 
{ 
var uploader = document.getElementById('file'); 
uploader.click(); 
return false; 
} 

내가 할 이미지를 원하는 이미지가 database.I에 삽입 제출 버튼을 클릭하면 사용자가 파일을 업로드 할 때 표시됩니다.

Answer 1

다음은 Google 사이트에서 사용하는 것입니다. 업로드하기 전, 즉 양식을 제출하기 전에 이미지를 미리보기하기위한 것입니다. 귀하의 질문은 조금 다르지만 도움이되기를 바랍니다.

HTML :

<img id="preview_img" style="max-width: 130px; max-height: 130px;" src="http://www.domain.com/images/<?php echo $this->profile_details->photo? $this->profile_details->photo: "default.png"; ?>"/> 
<input type="file" id="avatar" name="avatar" onchange="readURL(this);"/> 

자바 스크립트 :

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#preview_img').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
}