H5怎样做出图片拖拽上传预览组件
导读：收集整理的这篇文章主要介绍了H5怎样做出图片拖拽上传预览组件，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5怎样做出图片拖拽上传预览组件，H5做出图片拖拽上传预览组件的注意事项有哪些，下面就是实战案例，一起来看一下。H5...
收集整理的这篇文章主要介绍了H5怎样做出图片拖拽上传预览组件，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5怎样做出图片拖拽上传预览组件，H5做出图片拖拽上传预览组件的注意事项有哪些，下面就是实战案例，一起来看一下。H5中拖拽事件有:
[ - ] DragDrop：拖放完成，也就是鼠标拖入对象并在拖放区域释放。
[ - ] DragEnter ：拖放进入，也就是鼠标拖放对象进入拖放区域。
[ - ] DragLeave：离开拖放区域。
[ - ] DragOver ：拖放对象悬浮于拖放区域，在拖放区域内移动时多次触发。
1.拖拽文件获取文件信息
示例
!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.size1024*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.显示缩略图与动态增删效果
示例
!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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
python3与JS有什么不同
H5如何做图片上传预览组件
flv.js的使用详解
如何使用s-xlsx实现Excel 文件导入和导出
以上就是H5怎样做出图片拖拽上传预览组件的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： H5怎样做出图片拖拽上传预览组件
本文地址： https://pptw.com/jishu/583835.html