Vue 진행 막대 가 있 는 파일 드래그 업로드 기능 구현
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<style>
.dropbox {
border: .25rem dashed #007bff;
min-height: 5rem;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app" class="m-5">
<div class="dropbox p-3">
<h2 class="text-center"> </h2>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {},
methods: {},
mounted: function () {}
});
</script>
</body>
</html>
2.드래그 이벤트 감지
먼저 페이지 에 파일 드래그 를 지원 하고 Vue 의 mounted()함수 에 코드 를 추가 합 니 다.
mounted: function () {
var dropbox = document.querySelector('.dropbox');
dropbox.addEventListener('dragenter', this.onDrag, false);
dropbox.addEventListener('dragover', this.onDrag, false);
dropbox.addEventListener('drop', this.onDrop, false);
}이벤트 의 감청 함 수 는 Vue 의 methods 대상 에 추 가 됩 니 다.
methods: {
uploadFile: function (file) {
console.log(file);
},
onDrag: function (e) {
e.stopPropagation();
e.preventDefault();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i]);
}
}
},
3.드래그 이벤트 처리
현재,우 리 는 uploadFile()함수 에 기능 을 추가 하여 파일 을 드래그 할 때 드래그 구역 에 파일 이름과 업로드 진도 막대 가 나타 납 니 다.
우선 Vue 의 data 대상 에 files 속성 을 정의 하여 브 라 우 저 에 끌 어 다 놓 은 모든 파일 의 이름 을 저장 합 니 다.그리고 upload File()함수 가 호출 될 때마다 파일 이름과 업로드 진 도 를 files 에 저장 합 니 다.
data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
},
}이에 따라 HTML 코드 에 서 는 v-for 키워드 로 files 의 모든 항목 을 표시 합 니 다.
<div class="dropbox p-3">
<h2 class="text-center"> </h2>
<div class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
<h5 class="mt-0">{{ file.name }}</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"></div>
</div>
</div>
</div>업로드 할 파일 을 여기에 끌 어 옵 니 다
이렇게 하면 드래그 효과 가 있 습 니 다.
4.파일 업로드
다음은 진정한 파일 업 로드 를 실현 하고 uploadFile()함수 에 코드 를 계속 추가 합 니 다.
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
var fd = new FormData();
fd.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.send(fd);
},
if (isset($_FILES['myFile'])) {
move_uploaded_file($_FILES['myFile']['tmp_name'], 'uploads/' . $_FILES['myFile']['name']);
echo 'OK';
} else {
echo 'No file specified';
}
알림:끌 어 다 놓 을 때 PHP 를 만나면 No file specified 또는$FILES 가 NULL 인 경우 PHP 가 POST 요청 의 최대 바이트 나 업로드 파일 의 부 피 를 제한 한 것 일 수 있 습 니 다.이 때 php.ini 의 두 설정 을 조정 해 야 합 니 다.
post_max_size = 20M // POST
upload_max_filesize = 20M // 기본 적 인 업로드 기능 이 완성 되 었 습 니 다.마지막 으로 진도 표를 완성 하 겠 습 니 다.AJAX 가 데 이 터 를 보 내 달라 고 요청 할 때마다 progress 이벤트 가 생 성 됩 니 다.progress 이 벤트 를 감청 하여 현재 업로드 진 도 를 알 수 있 습 니 다.
uploadFile: function (file) {
...
xhr.upload.addEventListener('progress', function (e) {
item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
}, false);
xhr.send(fd);
},이렇게 하면 진도 가 있 는 파일 드래그 업로드 기능 이 완 료 됩 니 다.
첨부:전체 코드
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<style>
.dropbox {
border: .25rem dashed #007bff;
min-height: 5rem;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app" class="m-5">
<div class="dropbox p-3">
<h2 v-if="files.length===0" class="text-center"> </h2>
<div class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
<h5 class="mt-0">{{ file.name }}</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"></div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 0
};
this.files.push(item);
var fd = new FormData();
fd.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.addEventListener('progress', function (e) {
item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
}, false);
xhr.send(fd);
},
onDrag: function (e) {
e.stopPropagation();
e.preventDefault();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i]);
}
}
},
mounted: function () {
var dropbox = document.querySelector('.dropbox');
dropbox.addEventListener('dragenter', this.onDrag, false);
dropbox.addEventListener('dragover', this.onDrag, false);
dropbox.addEventListener('drop', this.onDrop, false);
}
});
</script>
</body>
</html>위 에서 말씀 드 린 바 와 같이 편집장 님 께 서 소개 해 주신 Vue 는 진도 표 가 있 는 파일 드래그 업로드 기능 을 실현 합 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
