html 파일이 로컬 (내 C 드라이브) 인 경우 작동하지만 html 파일이 서버에 있고 이미지 파일이 로컬 인 경우에는 작동하지 않습니다. 왜 그런 겁니까?
가능한 해결 방법이 있습니까?
답변
클라이언트가 로컬 파일 시스템 파일을 요청한 다음 JavaScript를 사용하여 파일에 무엇이 있는지 알아낼 수 있다면 보안 취약점이됩니다.
이 문제를 해결하는 유일한 방법은 브라우저에서 확장을 빌드하는 것입니다. Firefox 확장 및 IE 확장은 로컬 리소스에 액세스 할 수 있습니다. Chrome은 훨씬 더 제한적입니다.
답변
“C : /localfile.jpg”대신 “file : // C : /localfile.jpg”를 사용하면 안됩니까?
답변
로컬 HTML 페이지에 액세스하지 않는 한 브라우저는 로컬 파일 시스템에 액세스 할 수 없습니다. 이미지를 어딘가에 업로드해야합니다. html 파일과 동일한 디렉토리에 있으면 다음을 사용할 수 있습니다.<img src="localfile.jpg"/>
답변
C:인식 된 URI 체계가 아닙니다. file://c|/...대신 시도하십시오 .
답변
솔직히 가장 쉬운 방법은 서버에 파일 호스팅을 추가하는 것입니다.
-
IIS 열기
-
기본 웹 사이트 아래에 가상 디렉터리 추가
- 가상 경로는 브라우저에서 찾고자하는 것입니다. 따라서 ” serverName / images 를 선택 하면 http : // serverName / images 로 이동하여 찾아 볼 수 있습니다 .
- 그런 다음 C : 드라이브에 물리적 경로를 추가합니다.
-
“NETWORK SERVICE”및 “IIS AppPool \ DefaultAppPool”에 대해 C : 드라이브의 폴더에 적절한 권한을 추가합니다.
-
기본 웹 사이트 새로 고침
-
그리고 당신은 끝났습니다. 이제 http : //yourServerName/whateverYourFolderNameIs/yourImage.jpg 로 이동하여 해당 폴더의 이미지를 찾아보고 img src에서 해당 URL을 사용할 수 있습니다.
이것이 누군가에게 도움이되기를 바랍니다.
답변
IE 9 : 사용자가 이미지를 서버에 게시하기 전에 먼저보기를 원하는 경우 : 사용자는 웹 사이트를 “신뢰할 수있는 웹 사이트 목록”에 추가해야합니다.
답변
javascript의 FileReader () 와 readAsDataURL (fileContent) 함수를 사용하여 로컬 드라이브 / 폴더 파일을 표시 할 수 있습니다. 변경 이벤트를 이미지에 바인딩 한 다음 자바 스크립트의 showpreview 함수를 호출합니다. 이 시도 –
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function showpreview(e) {
var reader = new FileReader();
reader.onload = function (e) {
$("#previewImage").attr("src", e.target.result);
}
//Imagepath.files[0] is blob type
reader.readAsDataURL(e.files[0]);
}
</script>
</head>
<body >
<div>
<input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
</div>
<div>
</div>
<div>
<img width="50%" id="previewImage">
</div>
</body>
</html>
