html5에서 파일 업로드 기능을 구현하는 방법
- 清浅원래의
- 2018-11-16 12:42:0611042검색
이 기사에서는 HTML5를 사용하여 파일 업로드 기능을 구현한 사례를 공유할 것입니다. 이는 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
html5의 일부 새로운 API 메소드를 사용하면 더 쉽고 가능해집니다. 좀 더 역동적인 효과를 위해 파일 업로드 기능 구현을 자세히 소개합니다
케이스 구현에 사용되는 지식
(1) multiple은 HTML5의 새로운 속성으로 주로 여러 값을 업로드하는 데 사용됩니다. 파일, 규정 입력 필드는 일반적으로 입력 속성에서 이메일 및 파일과 공유되는 여러 값을 선택할 수 있습니다. (2) querySelector() 메소드는 지정된 선택기와 일치하는 문서의 첫 번째 요소를 반환하는 데 주로 사용됩니다. 모든 요소를 반환하려면 querySelectorAll() 메서드를 교체하면 됩니다.
(3) FileReader 개체를 사용하면 응용 프로그램이 읽을 파일이나 데이터를 지정하기 위해 File 또는 Blob 개체를 사용하여 컴퓨터에 저장된 파일의 내용을 비동기식으로 읽을 수 있습니다. File 객체는 d5fd7aea971a85678ba271703566ebfd 요소에서 파일을 선택한 후 반환된 FileList 객체일 수 있습니다
(4) readAsDataURL: 읽은 이미지 파일을 웹 페이지에 직접 표시하여 미리보기 효과를 얻습니다
코드 표시 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件读取</title>
<style>
.box{
width:500px;
height:500px;
border: 1px solid #ccc;
margin:300px auto;
position: relative;
background-color:rgb(167,239,251);
}
.file{
position: absolute;
bottom:0;
left:0;
}
#img{
position: absolute;
left:100px;
bottom:30px;
}
</style>
</head>
<body>
<div>
<input type="file" multiple>
<img src="" alt="" id="img">
</div>
<script>
var file = document.querySelector('.file');/*获取到了文件表单元素*/
/*选择文件后触发*/
file.onchange = function () {
/*初始化了一个文件读取对象*/
var reader = new FileReader();
/*读取文件数据 this.files[0] 文件表单元素选择的第一个文件 */
reader.readAsDataURL(this.files[0]);
/* 加载 */
reader.onload = function () {
/*读取完成显示图片*/
console.log(this.result);
document.querySelector('#img').src = this.result;
}
}
</script>
</body>
</html>
선택 취소 전
선택 후
요약: 위 내용은 HTML5를 사용하여 파일을 업로드하는 방법을 배우는 데 도움이 되기를 바랍니다.
위 내용은 html5에서 파일 업로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!