前端中那些与文件有关的操作_oimg.src = this.result-CSDN博客

本文链接：https://blog.csdn.net/bboyjoe/article/details/80207809

1.pc端拖拽文件并读取内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件拖拽读取内容</title>
    <style>
        #div1{
            width: 400px;
            height: 400px;
            background: #ccc;
            border: 1px solid #000;
            text-align: center;
            line-height: 400px;
        }
    </style>
    <script>
        window.onload = function () {
            let oDiv = document.getElementById('div1');
            let oP = document.getElementById('p1');
            let oImg = document.getElementById('img1');
            oDiv.addEventListener('dragenter',function () {
                oDiv.innerHTML = '请松手';
            },false);
            oDiv.addEventListener('dragleave',function () {
                oDiv.innerHTML = '拖到这里上传';
            },false);
            oDiv.addEventListener('dragover',function (e) {
                e.preventDefault();
            },false);
            oDiv.addEventListener('drop',function (e) {
                //阻止文件自动打开
                e.preventDefault();
                //获取文件
                let oFile = e.dataTransfer.files[0];
                //读取文件
                let reader = new FileReader();
                reader.onload = function () {
                    console.log(this);
                    if(oFile.type.indexOf('image') !== -1){
                        oImg.src = this.result;
                    }else{
                        oP.innerHTML = this.result;
                    }
                };
                reader.onerror = function () {
                    alert('读取失败');
                };
                // readAsArrayBuffer    读原始二进制数据
                // readAsBinaryString   二进制的文本形式数据 用于上传
                // readAsDataURL 读图片
                // readAsText   读文本
                if(oFile.type.indexOf('image') !== -1){
                    reader.readAsDataURL(oFile);
                }else{
                    reader.readAsText(oFile);
                }

            },false);
        }
    </script>
</head>
<body>

<div id="div1">拖到这里上传</div>
<p id="p1"></p>
<img src="" id="img1">
</body>
</html>