How to make a drag-and-drop image upload preview component in H5

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

nbsp;html>
    
        <meta>
        <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 &#39;Vollkorn&#39;;                color: #bbb;
            }        </style>
    
    
        <div>
            <div>将文件拖放到此处</div>
            <output></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(&#39;<li><strong>&#39;, escape(f.name), &#39; (&#39;, f.type || &#39;n/a&#39;, &#39;) - &#39;,
                        f.size, &#39; bytes, last modified: &#39;,
                        f.lastModifiedDate.toLocaleDateString(), &#39;&#39;);
                }                document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;&#39;;
            }            function handleDragOver(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                evt.dataTransfer.dropEffect = &#39;copy&#39;;
            }            var dropZone = document.getElementById(&#39;drop_zone&#39;);
            dropZone.addEventListener(&#39;dragover&#39;, handleDragOver, false);
            dropZone.addEventListener(&#39;drop&#39;, handleFileSelect, false);            //body中阻止 拖拽事件防止拖拽错误
            document.body.addEventListener(&#39;dragover&#39;, function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false;
            }, false);            document.body.addEventListener(&#39;drop&#39;, function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false; 
            }, false);        </script>
     

2. Limit file size and file format

nbsp;html>
    
        <meta>
        <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 &#39;Vollkorn&#39;;                color: #bbb;
            }        </style>
    
    
        <div>
            <div>将文件拖放到此处</div>
            <output></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(&#39;<li><strong>&#39;, escape(f.name), &#39; (&#39;, f.type || &#39;n/a&#39;, &#39;) - &#39;,
                            f.size, &#39; bytes, last modified: &#39;,
                            f.lastModifiedDate.toLocaleDateString(), &#39;&#39;);
                    }
                }                document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;&#39;;
            }            function handleDragOver(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                evt.dataTransfer.dropEffect = &#39;copy&#39;; // Explicitly show this is a copy.
            }            var dropZone = document.getElementById(&#39;drop_zone&#39;);
            dropZone.addEventListener(&#39;dragover&#39;, handleDragOver, false);
            dropZone.addEventListener(&#39;drop&#39;, handleFileSelect, false);            //body中阻止 拖拽事件防止拖拽错误
            document.body.addEventListener(&#39;dragover&#39;, function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false;
            }, false);            document.body.addEventListener(&#39;drop&#39;, function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false; 
            }, false);        </script>
     

3. Display thumbnails and dynamics Add and delete effect

Example

nbsp;html>
    
        <meta>
        <title>简易上传预览</title> 
        <style>
            #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>
    

   
        <!--防止拖拽跳转-->
        <div>
            <div>
                <label>将文件拖拽到这里或点击这里                    <input>
                </label>
                <div></div>
            </div>
        </div>
        <div>
            <button>清空</button>
            <button>上传</button>
        </div>
        <script>
            var ImgType = ["gif", "jpeg", "jpg", "bmp", "png", "ico", "webp"];            function getFileUrl(fileObj) {                return window.URL.createObjectURL(fileObj);
            }            //拖拽功能
            var output = document.getElementById(&#39;output_area&#39;);            var dropZone = document.getElementById(&#39;drop_zone&#39;);            if(!((&#39;draggable&#39; in dropZone) && (&#39;ondragenter&#39; in dropZone) &&
                    (&#39;ondragleave&#39; in dropZone) && (&#39;ondragover&#39; in dropZone) &&                    window.File)) {                document.getElementById(&#39;error_msg&#39;).style.display = &#39;block&#39;;                document.getElementById(&#39;demo_area&#39;).style.display = &#39;none&#39;;
            } else {                function handleFileDragEnter(e) {
                    e.stopPropagation();
                    e.preventDefault();                    this.classList.add(&#39;hovering&#39;);
                }                function handleFileDragLeave(e) {
                    e.stopPropagation();
                    e.preventDefault();                    this.classList.remove(&#39;hovering&#39;);
                }                function handleFileDragOver(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    e.dataTransfer.dropEffect = &#39;copy&#39;;
                }                function handleFileDrop(e) {
                    e.stopPropagation();
                    e.preventDefault();                    this.classList.remove(&#39;hovering&#39;);
                    FilesGetImgSv(e.dataTransfer.files);
                }
                dropZone.addEventListener(&#39;dragenter&#39;, handleFileDragEnter, false);
                dropZone.addEventListener(&#39;dragleave&#39;, handleFileDragLeave, false);
                dropZone.addEventListener(&#39;dragover&#39;, handleFileDragOver, false);
                dropZone.addEventListener(&#39;drop&#39;, handleFileDrop, false);
            }            //<input
            function handleFileSelect(evt) {
                FilesGetImgSv(evt.target.files);
            }            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, 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})">![](${v.BolbUrl})<a class="rimg-name"><strong>${v.name}`;
                });  
                document.getElementById("output_area").innerHTML=t;
            }            var demo = {                ImageLs: [],                removeThisUpImg: function(index) {
                    demo.ImageLs.splice(index, 1); 
                    reloadDiv();
                }
            };        </script>
     

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!