이번에는 H5에서 이미지 업로드 미리보기 컴포넌트를 만드는 방법을 보여드리겠습니다. H5에서 이미지 업로드 미리보기 컴포넌트를 만들 때 주의사항은 무엇인가요?
제 개발 환경은 Windows 10이고 테스트 브라우저는 Chrome과 Firefox입니다
호환되지 않는 브라우저가 나타나면 브라우저를 업그레이드하거나 Google it(~￣▽￣)을 사용해 보세요~
1. files
기본적으로 은 다중 속성을 추가한 후 다중 파일 선택이 허용됩니다
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>单选:<input type="file"/></label>
<label>多选:<input type="file" multiple="multiple"/></label>
</body></html>2. 브라우저 콘솔을 열고 선택하세요. 콘솔 변경 사항을 볼 수 있는 파일
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>可以这样:<input type="file" multiple="multiple" onchange="getFilesInfo(this.files)"/></label>
<script>
function getFilesInfo(f){ console.log(f);
} </script>
<label>也可以这样:<input id="files" type="file" multiple="multiple" /></label>
<script>
function getFilesInfo2(evt) { var files = evt.target.files;
console.log(files);
} document.getElementById('files').addEventListener('change', getFilesInfo2, false); </script>
<label>还可以这样:<input id="fileInput" type="file" multiple="multiple" onchange="getFilesInfo3()"/></label>
<script>
function getFilesInfo3(){ var files=document.getElementById("fileInput").files; console.log(files);
} </script>
</body></html>3. 일반적으로 사용되는 속성
두 번째 단계에서는 콘솔에서 파일을 확장하여 어떤 공통 속성이 있는지 살펴보겠습니다.
일반적으로 사용되는 속성 설명:
이름 -파일 이름크기-크기
유형-파일 유형
lastModified-최근 수정 날짜
자, 페이지에 몇 가지 정보를 출력해 보겠습니다
<!doctype html><html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="file" id="files" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; //如果你是单选那就直接evt.target.files[0]
var output = [];
for(var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body> </html>4. 파일 크기 및 파일 형식을 제한하세요
미리보기 업로드 시 이미지는 파일을 업로드해야 합니다. 크기와 형식으로 필터링하세요
지금은 jpg와 png만 업로드할 수 있고 파일 크기가 2mb 이내라고 가정해 보겠습니다. 파일 정보를 모른다면 매우 간단합니다. 필터링하려는 파일 형식을 콘솔에서 입력한 다음 복사하여 붙여넣을 수 있습니다물론 입력 태그에 accept="image/*"를 설정하여 이미지 파일만 입력하도록 허용할 수도 있습니다
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>过滤出图片</h3>
<input type="file" id="files" multiple accept="image/*" />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; var output = []; for(var i = 0, f; f = files[i]; i++) { if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body> </html>Example
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>预览</h3>
<input type="file" id="files" multiple accept="image/*" />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; var output = []; for(var i = 0, f; f = files[i]; i++) { if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){
output.push("![]("+URL.createObjectURL(f)+")");
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
} document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body></html>6. 단일 이미지 업로드 미리보기 예시
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>简单预览示例</h3>
<label id="fileBox" style="border: 1px #ccc solid;display:block;width: 100px;height:100px;background-clip:border-box;background-origin:padding-box;background-size:cover">
<input type="file" hidden="hidden" style="display: none;" onchange="fileSelect(this.files)"/>
</label>
<script>
function fileSelect(f) {
if(!f){ return;
}
f=f[0]; if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){ document.getElementById('fileBox').style.backgroundImage="url(" + URL.createObjectURL(f)+ ")";
}
} </script>
</body> </html>s-xlsx를 사용하여 Excel 파일을 가져오고 내보내는 방법
JavaScript를 사용하여 텍스트 데이터를 저장하는 방법
위 내용은 H5에서 이미지 업로드 미리보기 구성요소를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
