简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > php教程 > PHP开发 > 본문

입력 파일 업로드 이미지 미리보기 기능 예시 코드

高洛峰
풀어 주다： 2016-12-09 09:55:19
원래의
1282명이 탐색했습니다.

입력 파일 업로드 이미지 미리보기는 사실 매우 간단하지만, 한 번도 해본 적이 없다면 정말 놀라운 일입니다. 오늘은 그 신비한 베일을 벗겨보겠습니다. 사실 원리는 다음을 통해 정말 간단합니다. 암호.

구체적인 코드는 다음과 같습니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" multiple id="inputs"/> //multiple(多文件上传)
<div id=&#39;dd&#39;></div>
<script>
$(document).ready(function () {
$("#inputs").change(function () {
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
});
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML += "<img src=&#39;"+reader.result+"&#39;>";
};
}
</script>
</body>
<html>
로그인 후 복사

제출 후 이미지를 읽는 중복 과정을 피하고 업로드된 이미지를 직접 미리 볼 수 있습니다

관련 라벨：
input file
원천：php.cn
이전 기사：jQuery로 구현한 작은 그림 목록, 큰 그림 표시 효과 슬라이드 예제 다음 기사：jQuery는 ajax를 통해 양식 데이터를 일괄적으로 신속하게 제출합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹사이트에서 입력 요소를 가져올 수 없습니다. 그래서 Twitter에서 입력 요소를 가져오려고 하는데 실행하면 노드 터미널에서 계속 이런 오류가 발생하고 결과적으로 이 코드로 생성된 브라우저 창이 저절로 닫힙...
에서 2024-04-06 18:59:57
0
1
442
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
클리어 후에도 내 파일 입력값은 그대로 남아있습니다 스크린샷에서 볼 수 있듯이. 파일을 선택하고 페이지를 새로 고치지 않고 팝업을 유지한 후 다시 열면 파일 입력이 여전히 내가 선택한 파일입니다. <input...
에서 2024-04-06 15:44:52
0
1
384
반복을 통해 HTML 테이블에 객체의 중첩 배열 표시 중첩된 개체 배열이 포함된 다음 입력이 있습니다. summary는 상위 개체 배열이고, run_type은 중첩된 개체 배열입니다. letinput={"s...
에서 2024-04-05 14:11:42
0
1
1373
React가 입력의 닫는 태그를 렌더링하도록 하시겠습니까? 특이한 요청이 있습니다. 내 웹사이트는 React를 사용하여 구축되었으며 사람들이 공개 웹사이트의 HTML을 자신의 React 구성 요소에 복사할 수 있기를 바랍...
에서 2024-04-03 23:01:01
0
1
320
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！