JavaScript 드래그 앤 드롭 업로드 기능 구현 및 원리 소개
- 不言앞으로
- 2019-02-19 15:55:454114검색
이 글은 자바스크립트 드래그 앤 드롭 업로드 기능의 구현과 원리를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
최근 Xiao Ming은 웹 페이지에 파일을 업로드할 때 가끔 페이지가 충돌하는 상황에 직면했습니다. Xiao Ming은 이 상황을 주의 깊게 테스트한 결과 이전에 사용된 파일 업로드 구성 요소에 몇 가지 결함이 있음을 발견하여 다음 스타일로 직접 손으로 작성하기로 결정했습니다.
html part
<div>
<div>
<div>
<div>{{ fileName }}</div>
<div>
<span>将文件拖拽至此，或</span>
<label>点此上传</label>
</div>
</div>
</div>
<div>
<input>
<label>选择文件</label>
<button>提交</button>
</div>
</div>
css part# 🎜🎜 ## 🎜###
* {
font-size: 14px;
}
.drag-area {
height: 200px;
width: 300px;
border: dashed 1px gray;
margin-bottom: 10px;
color: #777;
}
.uploader-tips {
text-align: center;
height: 200px;
line-height: 200px;
}
.file-name {
text-align: center;
height: 200px;
line-height: 200px;
}#🎜🎜 #######js part##### new Vue({
el: '#app',
data () {
return {
fileName: '',
batchFile: '',
MAX_FILE_SIZE: 10 * 1000 * 1000
}
},
methods: {
// 点击上传
chooseUploadFile (e) {
const file = e.target.files.item(0)
if (!file) return
if (file.size > this.MAX_FILE_SIZE) {
return alert('文件大小不能超过10M')
}
this.batchFile = file
this.fileName = file.name
// 清空，防止上传后再上传没有反应
e.target.value = ''
},
// 拖拽上传
fileDragover (e) {
e.preventDefault()
},
fileDrop (e) {
e.preventDefault()
const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
if (!file) return
if (file.size > this.MAX_FILE_SIZE) {
return alert('文件大小不能超过10M')
}
this.batchFile = file
this.fileName = file.name
},
// 提交
uploadOk () {
if (this.batchFile === '') {
return alert('请选择要上传的文件')
}
let data = new FormData()
data.append('upfile', this.batchFile)
// ajax
}
}
})#🎜🎜 ###핵심 원칙 설명#🎜🎜 ## 🎜🎜 ## 🎜🎜# # 🎜🎜#드래그오버 앤 드롭 이벤트먼저 말씀드릴 것은 이 두 이벤트가 드래그 앤 드롭이라는 점입니다. 이 두 이벤트는 드래그 앤 드롭을 지원하기 때문입니다. 핵심 기능 업로드. 끌기 동작에는 두 가지 핵심 개념이 있는데, 그 중 하나는
입니다. 여기서는 드롭 대상의 이벤트에 대해서만 이야기하겠습니다. 드래그 요소의 이벤트는 직접 확인하시기 바랍니다.타겟 배치에는 어떤 이벤트가 있나요? 다음과 같습니다: 요소를 유효한 놓기 대상(예: 위 예의 점선 영역)으로 드래그하면 다음 이벤트가 순서대로 발생합니다.
(1) dragenter- ( 2) dragover
- (3) dragleave 또는 drop
요소가 드롭 대상으로 드래그되는 한 dragenter 이벤트가 트리거됩니다(mouseover 이벤트와 유사). 드래그오버 이벤트는 즉시 뒤따르며 드래그된 요소가 드롭 대상 내에서 이동하는 동안 계속 실행됩니다. 요소를 드롭 대상 외부로 드래그하면 dragover 이벤트가 더 이상 발생하지 않지만 dragleave 이벤트가 시작됩니다(mouseout 이벤트와 유사). 요소가 드롭 대상에 드롭되면 dragleave 이벤트 대신 드롭 이벤트가 시작됩니다.
이 예에서는 드래그오버 및 드롭 이벤트에만 주의하면 됩니다. 그러나 드롭 이벤트는 약간 이상합니다. 기본적으로 요소 배치가 허용되지 않기 때문에 이를 듣고 싶다면 일부 처리를 수행해야 합니다. 일부 유효하지 않은 배치 대상을 지나서 요소를 드래그하면 특수 커서(원 안에 백슬래시가 있음)는 배치할 수 없음을 나타냅니다. 다음과 같습니다:
拖拽元素，还一个是放置目标
위 예제 코드에서 e.preventDefault()와 같은 dragover 이벤트의 기본 동작을 재정의할 수 있습니다.
주의깊은 학생들은 드롭 이벤트에 e.preventDefault()도 있는데 제거할 수 있는지 물어볼 수도 있습니다. 직접 시도해 볼 수 있습니다.
dataTransfer 객체
이 객체는 조금 이상해 보일 수도 있지만 그 역할은 작지 않습니다. 예를 들어, 그림을 대상 영역으로 드래그하면 대상 영역은 어떻게 그림의 정보를 얻습니까? 그냥 의지하세요! 드래그된 요소에서 드롭 대상으로 문자열 형식의 데이터를 전달하는 데 사용되는 이벤트 객체의 속성입니다. 이 예에서는 이를 사용하여 드래그되는 파일 정보를 가져올 수 있습니다. 
입력 변경 이벤트
- 이 이벤트에는 실제로 함정이 있습니다. 바로 이런 기능이 있다는 것입니다. : 파일 내용이 수정되더라도 동일한 파일을 업로드하면 변경 이벤트가 발생하지 않습니다.
생각만해도 무섭네요! 예를 들어, 사용자가 문서를 업로드하고 싶은데 점선 영역으로 드래그한 후 문서 내용을 수정해야 한다고 판단되면 수정이 완료된 후 문서를 드래그하여 서버에 제출합니다. 그러면 그가 서버에 업로드한 문서 내용은 수정되지 않은 상태입니다.
따라서 재설정 처리를 수행하려면 파일이 업로드될 때마다 변경 이벤트가 트리거되도록 e.target.value = '' 코드가 필요합니다.
위 내용은 JavaScript 드래그 앤 드롭 업로드 기능 구현 및 원리 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!