HTML5는 로컬 파일 샘플 code_html5 튜토리얼 기술을 읽습니다.

html 구조 스타일은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<버튼>사진 추가

스타일 측면에서 입력 요소의 입력 상자가 표시되지 않아야 합니다. 이 경우 입력을 투명 스타일로 설정한 후 덮어야 합니다. 버튼 요소를 클릭해야만 이미지를 업로드할 수 있습니다. 이미지 파일만 업로드할 수 있도록 허용하려면 "image/*"로 설정하세요.

Css 스타일은 다음과 같습니다

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

.addpic{
위치:상대적;
너비:95px;
높이:30px; >배경: 없음 반복 스크롤 0 0 rgba(0, 0, 0, 0);
커서: 포인터
글꼴 크기: 30px;
위치: 절대; 🎜>right: 0 ;
top: 0;
z-index: 10
}


js 코드




코드 복사

코드는 다음과 같습니다.

function readFiles(evt){ var files=evt.target.files; if(!files){ console.log("파일이 잘못되었습니다."); return;

}

for(var i=0, file; file=files[i ]; i ){

var imgele=new Image();
var thesrc=window.URL.createObjectURL(file);
imgele.src=thesrc; {
$("#showlogo ").attr("src",this.src)
}
}
}







코드 복사

코드는 다음과 같습니다.

$(document).ready(function(){

$("#logoimg").change(function(e ){ readFiles(e) })