이미지 업로드 미리보기 기능은 주로 이미지 업로드 전에 효과를 미리 보는 데 사용됩니다. 현재 주류 방법에는 주로 JS, JQuery 및 Flash 구현이 포함되지만 일반적으로 JS를 사용하여 이미지 업로드 미리보기 기능을 구현합니다. 아래 예를 살펴 보겠습니다.
원칙:
두 단계로 나뉩니다. 이미지를 업로드하는 입력이 트리거되고 로컬 이미지가 선택되면 업로드 할 객체의 URL (Object URL)을 선택할 때; 사전 작성된 IMG 태그의 SRC 속성에 객체 URL을 할당하여 이미지를 표시합니다.
여기서는 JavaScript에서 파일 객체, Blob Object 및 Window.url.createObjectUrl () 메소드를 이해해야합니다.
파일 개체 :
파일 객체는 파일에 대한 정보를 얻는 데 사용될 수 있으며 파일의 내용을 읽는 데 사용될 수도 있습니다. 일반적으로 파일 객체는 입력 요소에서 파일을 선택한 후 사용자가 반환 한 FilElist 객체에서 나온 것입니다. 그렇지 않으면 Free Drag and Drop 작업으로 생성 된 Datatransfer 객체 일 수 있습니다.
filelist 객체를 얻는 것을 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"src = "jquery.js"> </script>
<input id = "Upload"type = "file">
<img id = "preview"src = "">
<script type = "text/javaScript">
$ ( '#upload'). Change (function () {
// filleList의 첫 번째 요소를 얻습니다
alert (document.getElementById ( 'Upload'). 파일 [0]);
});
</스크립트>
Blob Object :
Blob Object는 읽기 전용 원시 데이터를 포함하는 파일과 같은 객체입니다. Blob 객체의 데이터가 반드시 JavaScript의 기본 형식 일 필요는 없습니다. 파일 인터페이스는 Blob을 기반으로하며 Blob의 기능을 상속하며 사용자의 컴퓨터에서 로컬 파일을 지원하도록 확장됩니다.
파일 인터페이스가 Blob을 상속하기 때문에 얻으려는 객체 URL은 실제로 Blob 객체에서 얻은 것입니다. 다음은 Blob 객체를 URL로 변환하는 것입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var f = document.getElementById ( '업로드'). 파일 [0];
var src = window.url.createobjecturl (f);
document.getElementById ( 'preview'). src = src;
</스크립트>
호환성:
위의 방법은 크롬 브라우저에 적합합니다
IE 브라우저 인 경우 SRC 대신 입력 값을 직접 사용할 수 있습니다.
온라인으로 정보를 볼 때 파일 객체의 getasdataurl () 메소드를 직접 사용하여 URL을 얻을 수 있습니다. 이제이 방법이 폐지되었습니다. 마찬가지로 getTasext () 및 getAsbinary () 메소드가 있습니다. 그러한 예를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
function getfullpath (obj) {// 이미지의 전체 경로 가져 오기
if (obj) {
//즉
if (window.navigator.useragent.indexof ( "msie")> = 1) {
obj.select ();
return document.selection.createrange () 텍스트;
}
// Firefox
else if (window.navigator.useragent.indexof ( "firefox")> = 1) {
if (obj.files) {
return obj.files.item (0) .getasdataurl ();
}
return obj.value;
}
return obj.value;
}
}
이 코드는 클라이언트 이미지를 얻는 완전한 경로입니다.
크기와 형식을 제한합니다
코드 사본은 다음과 같습니다.
$ ( "#loadfile"). Change (function () {
var strsrc = $ ( "#loadfile"). val ();
img = 새로운 이미지 ();
img.src = getfullpath (strsrc);
// 업로드 파일 형식이 올바른지 확인하십시오
var pos = strsrc.lastindexof ( ".");
var lastname = strsrc.substring (pos, strsrc.length)
if (lastname.tolowercase ()! = ".jpg") {
ALERT ( "업로드 파일 유형은" + lastName + "이고 이미지는 JPG 유형이어야합니다");
거짓을 반환합니다.
}
// 업로드 된 파일의 종횡비를 확인하십시오
if (img.height / img.width> 1.5 || img.height / img.width <1.25) {
ALERT ( "업로드 한 이미지의 비율은 범위를 초과하며 종횡비는 1.25-1.5 사이 여야합니다");
반품;
}
// 업로드 된 파일이 크기를 대체하는지 확인하십시오
if (img.filesize / 1024> 150) {
ALERT ( "업로드 파일 크기는 150K 한도를 초과합니다!");
거짓을 반환합니다.
}
그 중에서도로드 파일은 HTML 입력 파일의 ID입니다. 변경 이벤트 후, 즉 업로드 할 파일을 선택한 후 이미지를 사진 상자에 표시하도록 하시겠습니까? 위의 코드 끝에 다음 코드를 추가하십시오.
코드 사본은 다음과 같습니다.
$ ( "#stupic"). attr ( "src", getfullpath (this));
jQuery가 사용되므로 jQuery에서 작성된 코드 예제를 공유해 봅시다.
코드 사본은 다음과 같습니다.
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head1">
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<script type = "text/javaScript"src = "jquery.js"> </script>
<script language = "javaScript">
$ (function () {
var ei = $ ( "#large");
ei.hide ();
$ ( "#img1"). MouseMove (function (e) {
ei.css ({top : e.pagey, 왼쪽 : e.pagex}). html ( '<img style = "테두리 : 1px solidgre 회색;"src = "' + this.src + '" />'). show ();
}). 마우스 아웃 (function () {
ei.hide ( "느린");
})
$ ( "#f1"). Change (function () {
$ ( "#img1") .attr ( "src", "file : ///"+$ ( "#f1") .val ());
})
});
</스크립트>
<스타일 유형 = "텍스트/CSS">
#large {위치 : 절대; 디스플레이 : 없음; z-index : 999;}
</스타일>
</head>
<body>
<form name = "form1"id = "form1">
<div id = "데모">
<input id = "f1"name = "f1"type = "file" />
<img id = "img1">
</div>
<div id = "large"> </div>
</form>
</body>
</html>