input添加照片

最新推荐文章于 2024-06-18 17:03:40 发布

孙朝阳

最新推荐文章于 2024-06-18 17:03:40 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： js node.js 文章标签： javascript 表单添加照片

本文链接：https://blog.youkuaiyun.com/chaoyangsun/article/details/78875462

node.js 同时被 2 个专栏收录

12 篇文章

订阅专栏

11 篇文章

订阅专栏

这篇博客介绍了如何在HTML表单中利用`<input type='file'>`标签实现照片上传的功能，并结合JavaScript进行相关操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML表单中，可以上传文件的唯一控件就是<input type=”file”>
js实现如下：

    let fileDom = document.querySelector("input[type=file]");
      //监听change事件
      fileDom.addEventListener("change", function(event) {
        //获取上传的图片信息
        let file = event.target.files[0];
        //创建读写器
        let fr = new FileReader();
        fr.onload = function() {
          //最终结果
          let newImg = fr.result;
          console.log(newImg);
          let img = new Image();
          img.src = newImg;
          document.body.appendChild(img);
        }
        //数据写入形式
        fr.readAsDataURL(file);
      })