本文主要包含html5,预览,上传等相关知识,匿名希望在学习及工作中可以帮助到您
这次给大家带来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.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.显示缩略图与动态增删效果
示例
<!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: