html5에서 파일 업로드 기능을 구현하는 방법-JS 튜토리얼-php.cn

html5에서 파일 업로드 기능을 구현하는 방법

清浅

풀어 주다： 2018-11-16 12:42:06

원래의

11124명이 탐색했습니다.

이 기사에서는 HTML5를 사용하여 파일 업로드 기능을 구현한 사례를 공유할 것입니다. 이는 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

html5의 일부 새로운 API 메소드를 사용하면 더 쉽고 가능해집니다. 좀 더 역동적인 효과를 위해 파일 업로드 기능 구현을 자세히 소개합니다

케이스 구현에 사용되는 지식

(1) multiple은 HTML5의 새로운 속성으로 주로 여러 값을 업로드하는 데 사용됩니다. 파일, 규정 입력 필드는 일반적으로 입력 속성에서 이메일 및 파일과 공유되는 여러 값을 선택할 수 있습니다. (2) querySelector() 메소드는 지정된 선택기와 일치하는 문서의 첫 번째 요소를 반환하는 데 주로 사용됩니다. 모든 요소를 반환하려면 querySelectorAll() 메서드를 교체하면 됩니다.

(3) FileReader 개체를 사용하면 응용 프로그램이 읽을 파일이나 데이터를 지정하기 위해 File 또는 Blob 개체를 사용하여 컴퓨터에 저장된 파일의 내용을 비동기식으로 읽을 수 있습니다. File 객체는 요소에서 파일을 선택한 후 반환된 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(&#39;.file&#39;);/*获取到了文件表单元素*/
/*选择文件后触发*/
file.onchange = function () {
/*初始化了一个文件读取对象*/
var reader = new FileReader();
/*读取文件数据  this.files[0] 文件表单元素选择的第一个文件 */
reader.readAsDataURL(this.files[0]);
/* 加载 */
reader.onload = function () {
    /*读取完成显示图片*/
    console.log(this.result);
document.querySelector(&#39;#img&#39;).src = this.result;

}
}
</script>
</body>
</html>

로그인 후 복사

효과 표시

선택 취소 전

Image 6.jpg 선택 후