js 업로드 이미지 미리보기 문제_이미지 특수 효과-JS 튜토리얼-php.cn

js 업로드 이미지 미리보기 문제_이미지 특수 효과

WBOY

풀어 주다： 2016-05-16 18:14:33

원래의

874명이 탐색했습니다.

최근 브라우저 호환성 문제가 자주 발생하는데, 어제 이미지 미리보기 업로드에 문제가 있어서 오랫동안 고생했는데, 오늘 아침에 해결되어서 정말 기쁩니다. 그래서 대부분 온라인에서 찾아보고 정리해서 여러분께 공유하고자 합니다.
IE6 및 IE7에 따라 개발할 때 일반적으로 이미지 미리보기용 코드를 작성합니다.

코드 복사 코드

document.getElementById("img").src = document.getElementById("file").value;

　다른 방법이 있습니다

코드 복사 코드는 다음과 같습니다.

IE8
IE8 및 Firefox Direct에서 user control.value는 전체 경로 대신 파일 이름만 가져옵니다.

코드 복사 코드

 
var isIE = (document.all) ? true : false 
var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1 ); 
var isIE8 = isIE && ( navigator.userAgent.indexOf('MSIE 8.0') != -1); 
var file = document.getElementById("file") 
if (isIE7 | | isIE8) { 
file.select( ); 
img = document.selection.createRange().text; 
document.selection.empty() 
document.getElementById("img") .src = img; 
} 

Firefox
Firefox에 문제가 많고 인터넷에서 많은 것을 검색했지만 달성할 수 없습니다.
을 구합니다. Firefox에 문제가 많고 인터넷에서 많은 것을 검색했지만 얻을 수 없습니다.
1. 먼저, 업로드된 질문의 전체 경로를 얻어야 합니다.

코드 복사 코드는 다음과 같습니다.

　if (navigator.userAgent.indexOf("Firefox") != -1) { 
　try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect" "); 
} catch (e) { 
} 
img = document.getElementById("file").value; 
　} 

 

　2. 그런데 이렇게 이미지의 경로(src)를 직접 수정하면 아무런 반응이 없었습니다. 나중에 어떤 분이 Firefox에서 로컬 이미지를 표시하려면 앞에 "file:///"을 추가해야 한다고 하더군요

코드 복사 코드는 다음과 같습니다.

　if (!document.all) { 
img = img.replace(/\/g, "/"); 
img = "file:///" img 
} 

 

이렇게 이미지를 넣으면 페이지에는 표시가 가능하지만 전제조건은 IIS에 배치할 수 없다는 점입니다. 내 웹사이트는 IIS에 배포되므로 이미지 주소를 직접 입력하고 로컬 이미지인 경우에도 표시되지 않습니다. .. 그래서 너무 우울하네요. 게다가 파이어폭스에는 보안 설정이 되어 있어서 로컬 이미지를 미리 볼 수 없다는 분들이 많아서 포기할 뻔 했습니다.
마지막으로 미리 볼 수 있는 예를 인터넷에서 찾았습니다. 주의 깊게 분석한 결과 Firefox에서 이미지를 미리 보기 위한 원래 코드는 실제로 매우 간단하다는 것을 알았습니다.

코드 복사 코드는 다음과 같습니다.

　document.getElementById("img").src = document.getElementById("file").files[ 0].getAsDataURL(); 

 

경로를 검색해 보니 이미지 종류 등을 지정하는 듯한 긴 문자열이었는데 드디어 해결했습니다.