Day-1-图片上传

最新推荐文章于 2024-08-29 19:36:49 发布

铭心NTeen

最新推荐文章于 2024-08-29 19:36:49 发布

阅读量108

点赞数

分类专栏： HTML5 文章标签： HTML5 前端 web javasc html+css

本文链接：https://blog.csdn.net/qq_25238675/article/details/103153487

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

图片上传显示

input标签type=“file” 支持文件上传，multiple表示支持多文件同时上传

<input type="file" multiple>

文件上传会自动触发input的onchange事件，

files的内部存储了上传文件的属性

input.onchange=function(){
        console.log(this.files);//this.files存储了文件的属性
    }

上传的图片还需显示在dom元素中，H5提供了FileReader这个构造函数让我们读取本地的文件

读取TXT文本时需注意，要UTF-8格式文件

具体步骤如下：

var reader=new FileReader()     //创建对象
reader.readAsText(文本文件)      //读取文本文件（文本文件需保存UTF-8格式）
reader.readAsDataURL（图片文件） //读取图片文件
reader.onload=function(){       //读取好之后执行，异步函数
    console.log(this.result)    //this.result是onload加载后的资源
}

上传代码实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" multiple>
<script>
    /*
    *   files 这个存储了 上传文件的集合
    *
    * */
    var input = document.querySelector('input')
    //当文件上传时 会触发回调函数
    input.onchange = function(){
        console.log('文件上传了');

        var file = this.files[0]
        console.log(file);

        //生成一个有读取文件能力的对象
        var reader = new FileReader()

        //读取图片
        reader.readAsDataURL(file)
        //等文件读取对象  读完了file的数据之后  会触发onload事件
        reader.onload = function(){
            console.log('文件读取完成');
            console.log(this.result)

            //创建img节点  document.createElement('img')
            var oImg = new Image();

            oImg.src = this.result ;   //异步代码
            oImg.width = 200;

            oImg.onload = function(){
                document.body.appendChild(this)
            }
        }

    }


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

铭心NTeen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day-1-图片上传

图片上传显示input标签type=“file” 支持文件上传，multiple表示支持多文件同时上传<input type="file" multiple>文件上传会自动触发input的onchange事件，files的内部存储了上传文件的属性input.onchange=function(){ console.log(this.fil...
复制链接

扫一扫

专栏目录