This time I will show you how to make a drag-and-drop image upload preview component in H5. What are the precautions for making a drag-and-drop image upload preview component in H5. Here is a practical case. Let’s take a look. .
The drag events in H5 include:
[ - ] DragDrop: Drag and drop is completed, that is, the mouse is dragged into the object and released in the drag and drop area.
[ - ] DragEnter: Drag and drop entry, that is, the mouse drags and drops the object into the drag and drop area.
[ - ] DragLeave: Leave the drag and drop area.
[ - ] DragOver: The drag-and-drop object is suspended in the drag-and-drop area, and is triggered multiple times when moving within the drag-and-drop area.
1. Drag and drop files to obtain file information
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>Copy after login
2. Limit file size and file format
<!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>Copy after login
3. Display thumbnails and dynamics Add and delete effect
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>Copy after login
<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>Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Related reading:
What is the difference between python3 and JS
How to make an image upload preview component in H5
Detailed explanation of the use of flv.js
How to use s-xlsx to import and export Excel files
The above is the detailed content of How to make a drag-and-drop image upload preview component in H5. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
