专栏首页一番码客【JavaScript小项目】在网页上显示选择的图片

【JavaScript小项目】在网页上显示选择的图片

思路分析

  1. 选用<input type="file">原生组件,实现该组件美化。
  2. 选用<img src="file">实现图片预览。

代码实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>图片预览</title>
        <script src="js/test.js">
            function upload(file) {
                console.log(file)
                let img = document.getElementById('img')
                let formData = new FormData()
                let temp = file.files[0]
                console.log(temp)
                if (temp){
                    formData.append('file',temp)
                    img.src = window.URL.createObjectURL(temp)
                }
            }
        </script>
        <style type="text/css">
            .myBtn{
                padding: 5px 10px;
                background: rgb(92,184,92);
                color: white;
                outline: none;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <input type="file" style="display: none;" id="file" onchange="upload(this)" />
        <button class="myBtn" onclick="fileBtn()">上传文件</button>
        <br />
        <img src="" id="img" style="width: 50%">
    </body>

</html>

效果展示

本来是想部署通过网页上传一个图片到服务器的功能的。

今天只实现了第一步,把图片选择和预览做了。服务器端还要部署接受服务才行。

就这第一步都花费了两个小时,孰能生巧啊。只学不习永远都落实不了。


一番雾语:JavaScript上传图片并预览。

本文分享自微信公众号 - 一番码客(efonfighting),作者:Efonfighting

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue下获取所选文件绝对路径

    我们在开发electron桌面应用时,因为常常希望对一些本地文件做一些操作,需要获取到这个文件的绝对路径。今天一番在electron-vue下实现了单击按钮选择...

    efonfighting
  • 通过ssh控制win10 ubuntu子系统,可能遇到的问题

    win10的开始-运行里面输入shell:startup打开启动文件夹,把startservice.vbs脚本放进去,重启系统,搞定。

    efonfighting
  • JavaScript对象

    efonfighting
  • Linux之文件管理及文本处理

    文件管理不外乎文件或目录的创建、删除、查询、移动,有mkdir/rm/mv 文件查询是重点,用find来进行查询;find的参数丰富,也非常强大; 有时候,...

    菲宇
  • 开发人员认为Python最适合AI的原因

    AI在确保正确的数据安全性方面获得了很多突出和认同。该理论使机器能够执行类似人类的任务,从而形成帮助数据安全的关键基础设施。基于人工智能的网络安全产品已被证明可...

    Java架构师历程
  • c# 上传代码

    文件上传这里分上传到服务器的文件夹和数据库 1:上传到文件夹 首先看aspx页面: 程序代码: <tr bgcolor="#ffffff"> <td heigh...

    Tony老师
  • python 上传下载 OSS 文件

    实现的功能很简单,先设置好云的 AccessKeyId 和 AccessKeySecret ,然后设置你所访问的 bucket 所在的区的链接和你所需要访问的 ...

    周小董
  • 4D nucleome project:染色质三维结构研究必不可少的参考项目

    通过ENCODE等一系列大型的国际化项目,科学家对于对于人和小鼠基因组中的基因结构,调控元件有了深入认知,识别到了许多的基因调控关系,然而对于其调控的具体机制仍...

    生信修炼手册
  • BAT面试算法进阶(4)-无重复字符的最长子串

    Given a string, find the length of the longest substring without repeating cha...

    CC老师
  • AI_第一部分 数据结构与算法(5.链表上篇)

    第四阶段我们进行深度学习(AI),本部分(第一部分)主要是对底层的数据结构与算法部分进行详尽的讲解,通过本部分的学习主要达到以下两方面的效果:

    还是牛6504957

扫码关注云+社区

领取腾讯云代金券