입력 파일 업로드 이미지 미리보기 기능 예시 코드
- 高洛峰원래의
- 2016-12-09 09:55:191318검색
입력 파일 업로드 이미지 미리보기는 사실 매우 간단하지만, 한 번도 해본 적이 없다면 정말 놀라운 일입니다. 오늘은 그 신비한 베일을 벗겨보겠습니다. 사실 원리는 다음을 통해 정말 간단합니다. 암호.
구체적인 코드는 다음과 같습니다.
<!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='dd'></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='"+reader.result+"'>";
};
}
</script>
</body>
<html>제출 후 이미지를 읽는 중복 과정을 피하고 업로드된 이미지를 직접 미리 볼 수 있습니다
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.