2013-06-17 4 views
0

다른 사진 프레임에 대한 사이트를 만들고 있는데 최종 사용자가 이미지 파일을 div에 업로드하면 페이지에 표시됩니다. 나는 아주 기본적인 바이올린을 만들었습니다 :자바 스크립트를 사용하여 Div에 로컬 이미지 업로드?

http://jsfiddle.net/Margate/w8C5r/

아이디어는 사용자가 업로드 이미지 버튼을 클릭하고 윈도우가 그들이 업로드 할 파일의 위치를 ​​검색 할 수 있도록 할 것이다 열 것입니다 페이지로 파일을 찾아서 선택합니다. 그러면 그림이 div 태그 안에 표시됩니다. Javascript를 사용하여이 작업을 수행 할 수 있습니까?

사전에 도움을 주셔서 감사합니다.

<html> 
<head> 
<title>Upload Image Help!</title> 

<style> 
#addImage{position: absolute; top: 5px; left: 50px; width: 300px; height: 200px; border: 1px solid black;} 
#button{position: absolute; top: 215px; left: 135px; width: 120px; height: 30px;} 
</style> 
</head> 

<body> 
<div id="addImage"></div> 
<button id="button" type="button">Upload Image</button> 
</body> 
</html> 
+0

예. 것이 가능하다. http://www.dotnetobject.com/Thread-Uploading-file-with-Javascript-and-XMLHTTPRequest – Ani

+1

용어 혼동 : 페이지에 업로드하지 않고 서버에 업로드합니다. 그래서 사람들이 서버에 파일을 업로드하고 싶다면 이미지 링크로 페이지에서 사용하거나 단순히 실행중인 페이지에 로컬 데이터를로드 한 다음 페이지에서 사용할 수는 있지만, 그들이 상쾌하게된다면 사라질까요? –

+0

안녕하세요, 마이크, 답장을 보내 주셔서 감사합니다. 나는 단지 브라우저에 업로드되도록 사진을 찍고 싶습니다. 최종 사용자가 다른 그림 프레임에서 어떻게 보일지에 대한 시각을 얻을 수 있습니다. 제 의도는 이미지가 페이지에 있으면 JS를 사용하여 클릭 할 때 프레임을 변경한다는 것입니다. 따라서 이미지를 서버에 저장할 필요가 없습니다. – Margate

답변

1

이 대답하기 어려운 질문이지만, "올바른"대답은 "아니오, 이것은 기본적으로 단지 HTML, CSS와 JS 수행 할 수 없습니다"입니다. 이유는 보안상의 이유로 html 태그를 통해 로컬 파일을 가리킬 수 없기 때문입니다. 당신이 가진 유일한 선택은 실제로 JS가 AJAX 호출을 통해 서버에 파일을 업로드하도록 한 다음 임시 업로드 된 파일을 div 자체에 표시하는 것입니다.

+0

안녕하세요 streetlogics, 조언 해 주셔서 감사합니다. 이 경우에 AJAX에 대해 배울 것입니다. – Margate

+0

다음은 개념을 약간 단순화하는 데 도움이되는 훌륭한 튜토리얼입니다. - http://css-tricks.com/ajax-image-uploading/ – streetlogics

관련 문제