web页面拖拽展示图片

 

/**图标拖拽事件 */

const drageEnvent = ()=>{

    const dropZone = document.getElementById('drag-box') as any;

    const iconSet = document.getElementById('content') as any;

    // 阻止默认的拖放行为，否则在 Firefox 中无法正常工作

    dropZone.addEventListener('dragover', function(event:any) {

       event.preventDefault();

    });

    // 当拖放对象进入时触发

    dropZone.addEventListener('dragenter', function() {

        dropZone.style.background = 'lightgray';

    });

    // 当拖放对象在目标区域释放时触发

    dropZone.addEventListener('drop', function(event:any) {

        event.preventDefault();

        // 获取拖放的文件

        const file = event.dataTransfer.files[0];

        // 检查是否是图片文件

        if (file.type.startsWith('image/')) {

            upload.showTipsFlag = false;

            const reader = new FileReader();

            // 图片加载完成后触发

            reader.onload = function(event:any) {

                const imgElement = document.createElement('img');

                imgElement.src = event.target.result;

                // 设置图片大小

                imgElement.style.width  = '50px';

                imgElement.style.height = '50px';

                imgElement.style.margin = '1rem';

                iconSet.appendChild(imgElement);

            };

            // 读取文件内容

            reader.readAsDataURL(file);

        };

         event.target.style.background = '';

    });

}