当前位置：Gxlcms > html代码 > H5怎样做出图片拖拽上传预览组件

H5怎样做出图片拖拽上传预览组件

时间：2021-07-01 10:21:17 帮助过：11人阅读

这次给大家带来H5怎样做出图片拖拽上传预览组件，H5做出图片拖拽上传预览组件的注意事项有哪些，下面就是实战案例，一起来看一下。

H5中拖拽事件有:
[ - ] DragDrop：拖放完成，也就是鼠标拖入对象并在拖放区域释放。
[ - ] DragEnter ：拖放进入，也就是鼠标拖放对象进入拖放区域。
[ - ] DragLeave：离开拖放区域。
[ - ] DragOver ：拖放对象悬浮于拖放区域，在拖放区域内移动时多次触发。

1.拖拽文件获取文件信息

示例

  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style>
  6.             .example {                padding: 10px;                border: 1px solid #ccc;
  7.             }            
  8.             #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;
  9.             }        </style>
  10.     </head>
  11.     <body>
  12.         <div class="example">
  13.             <div id="drop_zone">将文件拖放到此处</div>
  14.             <output id="list"></output>
  15.         </div>
  16.         <script>
  17.             function handleFileSelect(evt) {
  18.                 evt.stopPropagation(); //阻止默认事件
  19.                 evt.preventDefault(); //阻止默认事件
  20.                 var files = evt.dataTransfer.files;//获取文件集
  21.                 var output = [];                for(var i = 0, f; f = files[i]; i++) {
  22.                     output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
  23.                         f.size, ' bytes, last modified: ',
  24.                         f.lastModifiedDate.toLocaleDateString(), '</li>');
  25.                 }                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  26.             }            function handleDragOver(evt) {
  27.                 evt.stopPropagation();
  28.                 evt.preventDefault();
  29.                 evt.dataTransfer.dropEffect = 'copy';
  30.             }            var dropZone = document.getElementById('drop_zone');
  31.             dropZone.addEventListener('dragover', handleDragOver, false);
  32.             dropZone.addEventListener('drop', handleFileSelect, false);            //body中阻止 拖拽事件防止拖拽错误
  33.             document.body.addEventListener('dragover', function(evt) {
  34.                 evt.stopPropagation(); //阻止默认事件
  35.                 evt.preventDefault(); //阻止默认事件
  36.                 return false;
  37.             }, false);            document.body.addEventListener('drop', function(evt) {
  38.                 evt.stopPropagation(); //阻止默认事件
  39.                 evt.preventDefault(); //阻止默认事件
  40.                 return false; 
  41.             }, false);        </script>
  42.     </body> </html>

2.限制文件大小与文件格式

  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style>
  6.             .example {                padding: 10px;                border: 1px solid #ccc;
  7.             }            
  8.             #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;
  9.             }        </style>
  10.     </head>
  11.     <body>
  12.         <div class="example">
  13.             <div id="drop_zone">将文件拖放到此处</div>
  14.             <output id="list"></output>
  15.         </div>
  16.         <script>
  17.             function handleFileSelect(evt) {
  18.                 evt.stopPropagation(); //阻止默认事件
  19.                 evt.preventDefault(); //阻止默认事件
  20.                 var files = evt.dataTransfer.files;//获取文件集
  21.                 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")){//<===这里
  22.                             output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
  23.                             f.size, ' bytes, last modified: ',
  24.                             f.lastModifiedDate.toLocaleDateString(), '</li>');
  25.                     }
  26.                 }                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  27.             }            function handleDragOver(evt) {
  28.                 evt.stopPropagation();
  29.                 evt.preventDefault();
  30.                 evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  31.             }            var dropZone = document.getElementById('drop_zone');
  32.             dropZone.addEventListener('dragover', handleDragOver, false);
  33.             dropZone.addEventListener('drop', handleFileSelect, false);            //body中阻止 拖拽事件防止拖拽错误
  34.             document.body.addEventListener('dragover', function(evt) {
  35.                 evt.stopPropagation(); //阻止默认事件
  36.                 evt.preventDefault(); //阻止默认事件
  37.                 return false;
  38.             }, false);            document.body.addEventListener('drop', function(evt) {
  39.                 evt.stopPropagation(); //阻止默认事件
  40.                 evt.preventDefault(); //阻止默认事件
  41.                 return false; 
  42.             }, false);        </script>
  43.     </body> </html>

3.显示缩略图与动态增删效果

示例

  1. <!doctype html><html>
  2.     <head>
  3.         <meta charset="UTF-8" />
  4.         <title>简易上传预览</title> 
  5.         <style type="text/css">
  6.             #drop_zone {                display: block;                border: 2px dashed #BBB;                padding: 25px 5px;                text-align: center;                font-size: 20pt;                color: #BBB;                border-radius: 5px;
  7.             }            
  8.             #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;
  9.             }            
  10.             #file-upload-box {                margin: 40px 25px;                padding: 10px;                border: 1px solid #BBB;
  11.             }            
  12.             #description:first-line {                margin-left: 42px;
  13.             }            
  14.             #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;
  15.             }            
  16.             #file-upload-box {                position: absolute;                top: 45px;                bottom: 45px;                left: 20px;                right: 20px;                background-color: #fff;                overflow: auto;
  17.             }            
  18.             .upload-img-itme {                color: #333;                width: 170px;                margin: 10px;                color: #333;                flex: 1;
  19.             }            
  20.             .upload-img-itme a.rimg-name {                overflow: hidden;                text-overflow: ellipsis;                white-space: nowrap;                padding: 5px;                display: block;
  21.             }            
  22.             .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;
  23.             }            
  24.             .d-image:hover:after {                display: block;
  25.             }            
  26.             .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%);
  27.             }            
  28.             .d-image:hover> img {                -webkit-filter: blur(5px);                -moz-filter: blur(5px);                -ms-filter: blur(5px);                filter: blur(5px);
  29.             }        </style>
  30.     </head>
  1.    <body ondrop="return false" ondragover="return false">
  2.         <!--防止拖拽跳转-->
  3.         <div id="file-upload">
  4.             <div id="file-upload-box">
  5.                 <label id="drop_zone">将文件拖拽到这里或点击这里                    <input multiple id="files" type="file" hidden="hidden" style="display: none;" name="files[]" />
  6.                 </label>
  7.                 <div id="output_area"></div>
  8.             </div>
  9.         </div>
  10.         <div style="position: absolute; bottom: 10px; left: 40px; right: 40px;text-align: center;">
  11.             <button onclick="demo.ImageLs=[];reloadDiv();" style="padding: 5px 10px; background: #fff; border: 1px #000 solid; cursor: pointer;">清空</button>
  12.             <button onclick="alert('上传')" style="padding: 5px 10px; background: #fff; border: 1px #000 solid; cursor: pointer;">上传</button>
  13.         </div>
  14.         <script>
  15.             var ImgType = ["gif", "jpeg", "jpg", "bmp", "png", "ico", "webp"];            function getFileUrl(fileObj) {                return window.URL.createObjectURL(fileObj);
  16.             }            //拖拽功能
  17.             var output = document.getElementById('output_area');            var dropZone = document.getElementById('drop_zone');            if(!(('draggable' in dropZone) && ('ondragenter' in dropZone) &&
  18.                     ('ondragleave' in dropZone) && ('ondragover' in dropZone) &&                    window.File)) {                document.getElementById('error_msg').style.display = 'block';                document.getElementById('demo_area').style.display = 'none';
  19.             } else {                function handleFileDragEnter(e) {
  20.                     e.stopPropagation();
  21.                     e.preventDefault();                    this.classList.add('hovering');
  22.                 }                function handleFileDragLeave(e) {
  23.                     e.stopPropagation();
  24.                     e.preventDefault();                    this.classList.remove('hovering');
  25.                 }                function handleFileDragOver(e) {
  26.                     e.stopPropagation();
  27.                     e.preventDefault();
  28.                     e.dataTransfer.dropEffect = 'copy';
  29.                 }                function handleFileDrop(e) {
  30.                     e.stopPropagation();
  31.                     e.preventDefault();                    this.classList.remove('hovering');
  32.                     FilesGetImgSv(e.dataTransfer.files);
  33.                 }
  34.                 dropZone.addEventListener('dragenter', handleFileDragEnter, false);
  35.                 dropZone.addEventListener('dragleave', handleFileDragLeave, false);
  36.                 dropZone.addEventListener('dragover', handleFileDragOver, false);
  37.                 dropZone.addEventListener('drop', handleFileDrop, false);
  38.             }            //<input
  39.             function handleFileSelect(evt) {
  40.                 FilesGetImgSv(evt.target.files);
  41.             }            document.getElementById('files').addEventListener('change', handleFileSelect, false);            //图片文件 过滤 显示
  42.             function FilesGetImgSv(files) {//获取文件
  43.                 for(var i = 0, f; f = files[i]; i++) {                    if(RegExp("\.(" + ImgType.join("|") + ")$", "i").test(f.name.toLowerCase())) { //这里是简单后缀验证,可添加f.type验证格式
  44.                         f.BolbUrl = getFileUrl(f);
  45.                         demo.ImageLs.push(f);
  46.                     }
  47.                 }
  48.                 reloadDiv();
  49.             }            function reloadDiv(){//刷新视图
  50.                 var t="";
  51.                 demo.ImageLs.forEach(function(v,i){
  52.                     t=t+`<div class="upload-img-itme"><div class="d-image" onclick="demo.removeThisUpImg(${i})">![](${v.BolbUrl})</div><a class="rimg-name"><strong>${v.name}</strong></a></div>`;
  53.                 });  
  54.                 document.getElementById("output_area").innerHTML=t;
  55.             }            var demo = {                ImageLs: [],                removeThisUpImg: function(index) {
  56.                     demo.ImageLs.splice(index, 1); 
  57.                     reloadDiv();
  58.                 }
  59.             };        </script>
  60.     </body> </html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

python3与JS有什么不同

H5如何做图片上传预览组件

flv.js的使用详解

如何使用s-xlsx实现Excel 文件导入和导出

以上就是H5怎样做出图片拖拽上传预览组件的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！