H5怎样做出图片拖拽上传预览组件
互联网
18-3-12
这次给大家带来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: 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中文网其它相关文章！
相关阅读：
python3与JS有什么不同
H5如何做图片上传预览组件
flv.js的使用详解
如何使用s-xlsx实现Excel 文件导入和导出
以上就是H5怎样做出图片拖拽上传预览组件的详细内容，更多内容请关注技术你好其它相关文章！
免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
相关资讯
扫码关注公众号
技术文章 / 下载软件
趣味内容 / 专业带飞
