이번에는 H5에서 드래그 앤 드롭 이미지 업로드 미리보기 컴포넌트를 만드는 방법을 보여드리겠습니다. H5에서 이미지 드래그 앤 드롭 업로드 미리보기 컴포넌트를 만들 때 주의사항은 무엇인가요? 살펴보자.
H5의 드래그 이벤트는 다음과 같습니다.
[ - ] DragDrop: 드래그 앤 드롭이 완료됩니다. 즉, 마우스가 개체를 드래그 앤 드롭 영역으로 드래그한 후 놓습니다.
[ - ] DragEnter: 드래그 앤 드롭 입력, 즉 마우스가 개체를 드래그 앤 드롭 영역으로 드래그 앤 드롭합니다.
[-] DragLeave: 드래그 앤 드롭 영역을 벗어납니다.
[ - ] DragOver: 드래그 앤 드롭 개체가 드래그 앤 드롭 영역에 정지되고 드래그 앤 드롭 영역 내에서 이동할 때 여러 번 트리거됩니다.
1. 파일 정보 가져오기
Example
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.example { padding: 10px; border: 1px solid #ccc;
}
#drop_zone { border: 2px dashed #bbb; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 25px; text-align: center; font: 20pt bold 'Vollkorn'; color: #bbb;
} </style>
</head>
<body>
<div class="example">
<div id="drop_zone">将文件拖放到此处</div>
<output id="list"></output>
</div>
<script>
function handleFileSelect(evt) {
evt.stopPropagation(); //阻止默认事件
evt.preventDefault(); //阻止默认事件
var files = evt.dataTransfer.files;//获取文件集
var output = []; for(var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
} function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
} var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false); //body中阻止 拖拽事件防止拖拽错误
document.body.addEventListener('dragover', function(evt) {
evt.stopPropagation(); //阻止默认事件
evt.preventDefault(); //阻止默认事件
return false;
}, false); document.body.addEventListener('drop', function(evt) {
evt.stopPropagation(); //阻止默认事件
evt.preventDefault(); //阻止默认事件
return false;
}, false); </script>
</body> </html>2. 파일 크기 및 파일 형식 제한
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.example { padding: 10px; border: 1px solid #ccc;
}
#drop_zone { border: 2px dashed #bbb; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 25px; text-align: center; font: 20pt bold 'Vollkorn'; color: #bbb;
} </style>
</head>
<body>
<div class="example">
<div id="drop_zone">将文件拖放到此处</div>
<output id="list"></output>
</div>
<script>
function handleFileSelect(evt) {
evt.stopPropagation(); //阻止默认事件
evt.preventDefault(); //阻止默认事件
var files = evt.dataTransfer.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>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
} function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
} var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false); //body中阻止 拖拽事件防止拖拽错误
document.body.addEventListener('dragover', function(evt) {
evt.stopPropagation(); //阻止默认事件
evt.preventDefault(); //阻止默认事件
return false;
}, false); document.body.addEventListener('drop', function(evt) {
evt.stopPropagation(); //阻止默认事件
evt.preventDefault(); //阻止默认事件
return false;
}, false); </script>
</body> </html>3. 썸네일 표시 및 동적 추가 및 삭제 효과
Example
<!doctype html><html>
<head>
<meta charset="UTF-8" />
<title>简易上传预览</title>
<style type="text/css">
#drop_zone { display: block; border: 2px dashed #BBB; padding: 25px 5px; text-align: center; font-size: 20pt; color: #BBB; border-radius: 5px;
}
#drop_zone.hovering { -webkit-box-shadow: inset 0px 0px 50px #BBB; -moz-box-shadow: inset 0px 0px 50px #BBB; -o-box-shadow: inset 0px 0px 50px #BBB; box-shadow: inset 0px 0px 50px #BBB;
}
#file-upload-box { margin: 40px 25px; padding: 10px; border: 1px solid #BBB;
}
#description:first-line { margin-left: 42px;
}
#output_area { text-align: center; display: flex; flex-wrap: wrap; align-content: space-between; position: absolute; left: 0; right: 0; top: 106px; overflow: auto; bottom: 0;
}
#file-upload-box { position: absolute; top: 45px; bottom: 45px; left: 20px; right: 20px; background-color: #fff; overflow: auto;
}
.upload-img-itme { color: #333; width: 170px; margin: 10px; color: #333; flex: 1;
}
.upload-img-itme a.rimg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px; display: block;
}
.d-image { box-shadow: 0 0 10px #bbb; border-radius: 20px; overflow: hidden; width: 170px; height: 170px; display: inline-block; z-index: 344; background-color: #cecece; position: relative; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor: pointer;
}
.d-image:hover:after { display: block;
}
.d-image:after { content: "×"; font-size: 44px; text-align: center; width: 50%; margin: auto; position: absolute; top: 50%; display: none; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.d-image:hover> img { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
} </style>
</head> <body ondrop="return false" ondragover="return false">
<!--防止拖拽跳转-->
<div id="file-upload">
<div id="file-upload-box">
<label id="drop_zone">将文件拖拽到这里或点击这里 <input multiple id="files" type="file" hidden="hidden" style="display: none;" name="files[]" />
</label>
<div id="output_area"></div>
</div>
</div>
<div style="position: absolute; bottom: 10px; left: 40px; right: 40px;text-align: center;">
<button onclick="demo.ImageLs=[];reloadDiv();" style="padding: 5px 10px; background: #fff; border: 1px #000 solid; cursor: pointer;">清空</button>
<button onclick="alert('上传')" style="padding: 5px 10px; background: #fff; border: 1px #000 solid; cursor: pointer;">上传</button>
</div>
<script>
var ImgType = ["gif", "jpeg", "jpg", "bmp", "png", "ico", "webp"]; function getFileUrl(fileObj) { return window.URL.createObjectURL(fileObj);
} //拖拽功能
var output = document.getElementById('output_area'); var dropZone = document.getElementById('drop_zone'); if(!(('draggable' in dropZone) && ('ondragenter' in dropZone) &&
('ondragleave' in dropZone) && ('ondragover' in dropZone) && window.File)) { document.getElementById('error_msg').style.display = 'block'; document.getElementById('demo_area').style.display = 'none';
} else { function handleFileDragEnter(e) {
e.stopPropagation();
e.preventDefault(); this.classList.add('hovering');
} function handleFileDragLeave(e) {
e.stopPropagation();
e.preventDefault(); this.classList.remove('hovering');
} function handleFileDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
} function handleFileDrop(e) {
e.stopPropagation();
e.preventDefault(); this.classList.remove('hovering');
FilesGetImgSv(e.dataTransfer.files);
}
dropZone.addEventListener('dragenter', handleFileDragEnter, false);
dropZone.addEventListener('dragleave', handleFileDragLeave, false);
dropZone.addEventListener('dragover', handleFileDragOver, false);
dropZone.addEventListener('drop', handleFileDrop, false);
} //<input
function handleFileSelect(evt) {
FilesGetImgSv(evt.target.files);
} document.getElementById('files').addEventListener('change', handleFileSelect, false); //图片文件 过滤 显示
function FilesGetImgSv(files) {//获取文件
for(var i = 0, f; f = files[i]; i++) { if(RegExp("\.(" + ImgType.join("|") + ")$", "i").test(f.name.toLowerCase())) { //这里是简单后缀验证,可添加f.type验证格式
f.BolbUrl = getFileUrl(f);
demo.ImageLs.push(f);
}
}
reloadDiv();
} function reloadDiv(){//刷新视图
var t="";
demo.ImageLs.forEach(function(v,i){
t=t+`<div class="upload-img-itme"><div class="d-image" onclick="demo.removeThisUpImg(${i})"></div><a class="rimg-name"><strong>${v.name}</strong></a></div>`;
});
document.getElementById("output_area").innerHTML=t;
} var demo = { ImageLs: [], removeThisUpImg: function(index) {
demo.ImageLs.splice(index, 1);
reloadDiv();
}
}; </script>
</body> </html>마스터하셨을 거라 믿습니다. 이 기사의 사례를 읽은 후 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
H5에서 이미지 업로드 미리 보기 구성 요소를 만드는 방법
s-xlsx를 사용하여 Excel 파일 가져오기 및 내보내기를 구현하는 방법
위 내용은 H5에서 드래그 앤 드롭 이미지 업로드 미리보기 구성요소를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
