의견 :이 기사는 주로 HTML5 로컬 파일을 읽는 특정 구현을 소개합니다. HTML 구조 스타일, CSS 스타일 및 JS 코드는 다음과 같습니다. 필요한 친구들은 살펴볼 수 있습니다
HTML 구조 스타일은 다음과 같습니다.<div>
<버튼> 사진 추가 </button>
<양식>
<input type = "파일"Multiple Accept = "image/*">
</form>
</div>
<img src = "">
스타일의 관점에서 입력 요소의 입력 상자를 표시해서는 안됩니다. 현재 입력은 투명한 스타일로 설정 한 다음 버튼 요소 위에 덮어 씁니다. 그래야만 버튼을 클릭하여 이미지를 업로드 할 수 있습니다. 이미지/*에 허용되는 세트, 이미지 파일 업로드 만 허용됩니다.
CSS 스타일은 다음과 같습니다
.addpic {
위치 : 상대;
마진 왼쪽 : 100px;
너비 : 95px;
높이 : 30px;
}
.addlogo {
배경 : 없음 스크롤 0 0 RGBA (0, 0, 0, 0);
커서 : 포인터;
글꼴 크기 : 30px;
불투명도 : 0;
위치 : 절대;
오른쪽 : 0;
상단 : 0;
z- 인덱스 : 10;
}
JS 코드
함수 readfiles (evt) {
var files = evt.target.files;
if (! 파일) {
console.log ( "파일은 invaild");
반품;
}
for (var i = 0, file; file = files [i]; i ++) {
var imgele = new Image ();
var thesrc = window.url.createobjecturl (파일);
imgele.src = thesrc;
imgele.onload = function () {
$ ( "#showlogo"). attr ( "src", this.src);
}
}
}
$ (document) .ready (function () {
$ ( "#logoimg"). Change (함수 (e) {
readfiles (e)
});
});