JS实现文件拖拽上传

2023-12-13 19:03:52

<style>
    .wrap{
        background: #e5e5e5;
        width:500px;
        height:100px;
        margin: 0 auto;
        text-align: center;
        line-height:100px;
        color: #fff;
    }
    #box{
        height:500px;
        border: 2px solid skyblue;
    }
    #box img{
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <h1  class="wrap">
            将文件推入内部实现在框内显示
    </h1>
    <div id="box">
    </div>
    <script>
        //获取元素
        let oWrap=document.querySelector('.wrap')
        //
        oWrap.ondragover=function (ev) {
            return false;
            //防止默认触发
            ev.preventDefault()
            //防止事件冒泡
            ev.stopPropagation()
        }
        oWrap.ondrop=function (ev) {
            ev.preventDefault();
            ev.stopPropagation()
            //获取了从外部拖进来的文件
            console.log(ev.dataTransfer.files);
            let file=ev.dataTransfer.files[0];
            //创建读取文件的对象,
            let oFile=new FileReader();
            //通过读取文件对象的readAsDataURL 方法读取指定的文件,此方法只读取路径
            // oFile.readAsDataURL(file)
 
            /*通过文件的不同类型选择不同的读取方式*/
            if(file.type.includes('image')){
                oFile.readAsDataURL(file)
            }else if(file.type.includes('text')){
                //解决中文乱码
                oFile.readAsText(file,'gb2312')
            }
            //获取的结果在oFile.result上,读取为空,因为读取需要时间
            //文件信息读取完毕之后会触发oFile.onload
            oFile.onload=function () {
                let src=oFile.result;
                let dom='';
                //第一种方式
                // box.innerHTML+=`<img src="${oFile.result}" width="50px" height="50px"  />`
                //第二种方式,此处也判断如果file.type包含image用以下这种方式
                if(file.type.includes('image')){
                    let img=new Image();
                    img.src=src;
                    //box标签追加img元素
                    box.appendChild(img);
                }else if (file.type.includes('text')){
                    //创建内容标签
                    dom=document.createElement('p')
                    dom.innerHTML=src
                    //box标签追加img元素
                    box.appendChild(dom);
                }
            }
        }
    </script>
</body>

?

?

文章来源:https://blog.csdn.net/qq_41429765/article/details/134977699
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。