JS : 개인용 드라이브에서 사용자 이미지로드

사용자가 개인 드라이브에서 이미지를보고 현재 웹 페이지의 변수를 만들 수있는 방법이 있습니까? (이 모든 것은 이미지를 서버로 보낼 필요없이)JS : 개인용 드라이브에서 사용자 이미지로드

예를 들어 사용자는 드라이브에서 사진을 선택합니다. 그런 다음 캔버스에서 그들을 움직일 수 있습니다.

참고 : 문제는 이미지를 선택하여 변수에 넣는 것입니다. 나는 그것들을 어떻게 표시하는지 이미 알고있다.

<img src="smiley.gif">과 같은 것은 분명히 작동하지 않습니다.

저는 Jquery를 사용하고 있습니다.

2014-02-12 RainingChain

당신은이 작품을 크로스 브라우저 문제가있을 것입니다,하지만 파일 리더를 사용하여 가능하다 : 여기 MDN에서 예입니다. https://developer.mozilla.org/en-US/docs/Web/API/FileReader –

나는 당신이 찾고있는 것이 자바 스크립트 FileReader 일 것이라고 믿습니다. readAsDataURL 기능.

사용자가 클릭하여 파일 브라우저를 가져 와서 일부 이미지를 선택할 수있는 일종의 업로드/선택 영역을 추가하는 것으로 시작합니다. 그런 다음 이벤트를 캡처하고 fileReader를 사용하여 데이터 URI에 파일을 읽으면 이미지 src 속성에 이미지를 표시하여 배치 할 수 있습니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Example</title> 
</head> 
<body>  
<input type="file" onchange="previewFile()"><br> 
<img src="" height="200" alt="Image preview..."> 
<script type="text/javascript"> 
function previewFile() { 
    var preview = document.querySelector('img'); 
    var file = document.querySelector('input[type=file]').files[0]; 
    var reader = new FileReader(); 

    reader.onloadend = function() { 
    preview.src = reader.result; 
    } 

    if (file) { 
    reader.readAsDataURL(file); 
    } else { 
    preview.src = ""; 
    } 
} 
</script> 
</body> 
</html>

출처

2014-02-12 18:13:53

JS : 개인용 드라이브에서 사용자 이미지로드

답변

관련 문제