업로드 후 JavaScript가 사용자 브라우저의 로컬 이미지를로드합니다.

Question

일부 편집을 위해 사용자가 로컬 파일 시스템에서 하나의 이미지를 브라우저로로드해야합니다.

플래시 등을 사용하고 싶지 않습니다. 오직 HTML과 JavaScript.

그래서 사용자가 이미지를 서버에 업로드하고 서버가 파일의 내용을 반환하도록합니다 (file_get_contents를 사용).

이제 JavaScript의 이미지 파일 내용을 문자열로 사용했습니다. 이 문자열을 이미지 요소의 src에 할당 할 것으로 예상됩니다. 하지만 src에 할당하면 아무 일도 일어나지 않습니다.

무엇이 잘못 되었나요? 해결책은 무엇입니까?

Answer 1

src은 URL을 의미합니다.

중 하나를 설정하는 서버에 URL, 또는에 Base64로 인코딩 된 이미지 사용

이

PHP :

$imagedata = file_get_contents($file); 
$encoded = base64_encode($imagedata); 
echo $encoded; 

자바 스크립트 :이

var imageElem = document.getElementById('image'); 
var filetype = 'png'; // Set file type here 
imageElem.src = 'data:image/' + filetype + ';base64,' + image;