Home > Article > Web Front-end > How to make a drag-and-drop image upload preview component in H5
How to make a drag-and-drop image upload preview component in H5
- php中世界最好的语言Original
- 2018-03-12 09:43:152208browse
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>
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>
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>
<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>
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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Create a modal box example with HTML5 and CSS3Next article：Create a modal box example with HTML5 and CSS3
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server