H5ke15--1--文本管理器拖进来

白天的我最菜

已于 2023-12-19 10:53:54 修改

阅读量385

点赞数 10

分类专栏： H5 文章标签： html 前端

于 2023-12-16 21:53:19 首次发布

本文链接：https://blog.csdn.net/m0_72735063/article/details/135030750

版权

H5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

师说：

说居中

1如图1，父元素没有行高，子元素就不继承，有了就变成图2

2或者直接写表格自动垂直居中，但是table太古老了，没人用这个，如图3

3我们父元素display: table;展示位表格，子元素display: table-cell;
vertical-align: middle;设置为表格细胞，再垂直居中，

4#container>p:nth-child(1是从1开始的，测试每一个段落在上中下，如图5

5我们来进行，阻止在新窗口打开

6尝试打印我们文件的名字类型等,间接介绍了datatranfer用法，如图6

7因为js安全性，FileReader 要么是个文件，硬盘读到内存里面去，我们要我们电脑的弄到浏览器上面显示，如图7

8模拟别的事件，首先这个按钮点击事件，创建我们的鼠标事件，然后这个点击的鼠标事件进行初始化分配给文件事件，如图8

9 把我们选择的文件的名字写上去把真真的按钮隐藏

吾说

本地图片拖放。

图片的类型是type: "image/png"，\/是转成/，看符合哪个表达式放到FileReader对象里面，谁来读呢读手dataTransfer来读。之后就是onload事件，怎么放到我网页上面呢，就是使用内存result。

创建一个新的元素加到我们的p后面作为元素儿子

模拟别的事件

先把别的时间隐藏css的display: none;再拿到我们的把柄变量，进行创建点击事件这个变量初始化我的鼠标事件，然后把这个事件分配给我们的文件按钮。

然后我们的文件事件被改变就进行我们的onchange事件，一被改变就在我们元素旁边加上我们文件的名字属性显示出来

注意：

在页面上面垂直居中很困难

宽度是父元素的100%，高度自适应3011

>是直接子元素

怎么引用这块内存，Result

读完filereader事件会触发load事件

js的页面默认维护了一个队列

/image\/\w+/.test(file.type)看符合哪个表达式

DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据

dataTransfer 的工作原理如下：///放置被拖的数据

设置数据：在拖动开始时（dragstart 事件），你可以使用 setData 方法设置要拖动的数据。这可以是任何类型的数据，如文本、JSON、文件数据等。
传递数据：当用户将元素拖到目标位置并释放时（drop 事件），你可以从 dataTransfer 对象中获取之前设置的数据。这通常是通过 getData 方法完成的。
处理数据：获取到数据后，你可以对其进行进一步的处理。例如，如果拖动的是文件，你可以获取文件的名称或内容。如果拖动的是文本或 JSON 数据，你可以直接使用这些数据。
自定义行为：通过监听 dragover 和 drop 事件，你可以控制拖放的外观和行为。例如，你可以使用 CSS 来定制拖放过程中的效果。
安全性：由于拖放操作可以暴露数据，因此浏览器对拖放操作进行了一些安全限制。例如，你不能直接访问拖动的文件内容（除非用户选择要上传的文件）。这是为了防止恶意网站在没有用户许可的情况下访问用户的文件系统。

FileReader 的工作原理如下：//读文件的类，怎么读，使用方法

创建：当用户选择一个文件后，浏览器会创建一个新的 FileReader 对象。
读取：使用 readAsText、readAsDataURL、readAsBinaryString 等方法，开始读取文件内容。这些方法将文件内容转换为浏览器可以处理的格式。
加载：当文件内容被成功读取后，触发 loadend 事件，并触发 onload 事件，文件的内容将作为事件对象的一部分传递。
使用：在 onload 事件处理器中，你可以访问读取到的文件内容，并进行进一步的处理。

图1

图2

图3

图4

图5

图6

图7

图8

图9

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            input[type=file]{
                display: none;
            }
        </style>
    </head>
    <body>
        <input type="file" multiple>
        <input type="button" value="打开文件按钮">
        <span></span>
        <script>
            let file_btn = document.querySelector("input[type=file]")
            // file_btn.addEventListener("click",(event)=>{
            //     console.log(event.target.files.length)
            // })//之前执行
            // file_btn.onclick=function (event){
            //     // alert()
            //     console.log(event.target.files.length);
            // }//之前执行
            file_btn.onchange=(event)=>{
                console.log(event)
                console.log(file_btn.files.length)
                console.log(event.target.files.length)//与上面一样
                for(let i=0,files=file_btn.files;i<files.length;i++){
                    btn_open.nextElementSibling.innerHTML+=files[i].name+"<br/>";//相邻的元素设置为内容为
                }
            }//之后执行

            let btn_open = document.querySelector("input[type=button]")
            btn_open.addEventListener("click",(event)=>{
                // alert();
                let e=document.createEvent("MouseEvents");//鼠标事件有一个event，2自己写就要创建一个event
                e.initMouseEvent("click",true,true,window.defaultView,0,0,0,0,0,false,false,false,false,0,null)//1默认都可以冒泡cancelable=true才能触发取消他的默认事件,2设置他的属性
                file_btn.dispatchEvent(e)//把这个事件分配给我们的文件按钮
            })
        </script>
    </body>
</html>

图10

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #container {
                width: 400px;
                height: 600px;
                /*line-height: 600px;*/
                background: #eee;
                margin: auto;
                display: table;
            }

            #container > p {
                /*margin: auto;*/
                /*background: red;*/
                display: table-cell;
                vertical-align: middle;
            }

            /*3#container>p:nth-child(1){*/
            /*    vertical-align: top;*/
            /*}*/
            /*#container>p:nth-child(2){*/
            /*    vertical-align: middle;*/
            /*  background: antiquewhite;*/
            /*}*/
            /*#container>p:nth-child(3){*/
            /*    vertical-align: bottom;*/
            /*}*/
            #container > p > * {
                width: inherit;
                height: inherit;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <p>你好</p>
            <!--1        <p>段落2</p>-->
            <!--        <p>段落3</p>-->
            <!--        <table border="1" width="400" height="600">-->
            <!--            <tr>-->
            <!--                <td>-->
            <!--                    <p style="background: red">这里是段落</p>-->
            <!--                </td>-->
            <!--            </tr>-->
            <!--        </table>-->
        </div>
        <script>
            let p = document.querySelector("#container>p");
            p.ondragenter = p.ondragover = (event) => {
                event.preventDefault()
            }
            p.ondrop = (event) => {
                event.preventDefault();
                let fr = new FileReader();
                let file = event.dataTransfer.files[0];//我们从操作系统里面获取我们的第一个文件

                if (/image\/\w+/.test(file.type)) {
                    let fr = new FileReader();//创建file对象，使用方法，改变我们的onload事件
                    fr.readAsDataURL(file)                      //-----------处理图片
                    fr.onload = (event) => {
                        p.innerHTML = "";                       //可以改变文本
                        let img = document.createElement("img");
                        img.src = fr.result;
                        p.appendChild(img);
                    }
                } else if (/text\/\w+/.test(file.type)) {
                    fr.readAsText(file)                         //-----------处理文本
                    fr.onload = (event) => {
                        p.innerHTML = fr.result;                //存文本
                    }
                }


            }

        </script>
    </body>
</html>

白天的我最菜

关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5ke15--1--文本管理器拖进来

设置为表格细胞，再垂直居中，3我们父元素display: table;展示位表格，子元素display: table-cell;4#container>p:nth-child(1是从1开始的，测试每一个段落在上中下，如图5。2或者直接写表格自动垂直居中，但是table太古老了，没人用这个，如图3。1如图1，父元素没有行高，子元素就不继承，有了就变成图2。宽度是父元素的100%，高度自适应。5我们来进行，阻止在新窗口打开。在页面上面垂直居中很困难。
复制链接

扫一扫