<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="file" onchange="show(this)"/>

        <img id="img" src="">

        <script>

            function show(file){

                var reader = new FileReader();    // 实例化一个FileReader对象，用于读取文件

                var img = document.getElementById('img');     // 获取要显示图片的标签

                //读取File对象的数据

                reader.onload = function(evt){

                    img.width  =  "80";

                    img.height =  "80";

                    img.src = evt.target.result;

                }

                reader.readAsDataURL(file.files[0]);

            }

        </script>

    </body>

js实现图片选中马上显示图片名，选择后可以预览，即选即显的更多相关文章

  1. js实现图片选中马上显示功能，选择后可以预览，即选即显

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html file控件选择文件后立即预览 js实现

    //上传图片后立即预览 file对象,图片容器id function showImg(fileObj,imgId) { var file=fileObj.files[0]; var r = new F ...

  3. HTML5: 实现调用系统拍照或者选择照片并预览

    ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览 1.返回顶部 1. <!DOCTYPE html> <html> <head> <meta ...

  4. js打印Iframe中的内容，并且不需要预览。

    js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...

  5. [js/jquery]移动端手势拖动，放大，缩小预览图片

    摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度 ...

  6. 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

  7. js实现图片上传后即时预览

    //关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...

  8. h5 实现调用系统拍照或者选择照片并预览

    这次又来分享个好东西! 调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的, 每当看到这块功能的 ...

  9. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  10. android系统webview使用input实现选择文件并预览

    一般系统的实现方式: 代码实现 <!doctype html> <html> <head> <meta charset="utf-8"&g ...

随机推荐

  1. 如何用 JavaScript 编写你的第一个单元测试

    前言 测试代码是使代码安全的第一步.做到这一点的最好方法之一是使用单元测试,确保应用程序中的每个小功能都能发挥其应有的作用--特别是当应用程序处于边缘情况,比如无效的输入,或有潜在危害的输入. 为什么 ...

  2. 进击的K8S：Kubernetes基础概念

    Kubernetes简介 Kubernetes简称K8S(因为k和s中间有8个字母),是一个开源的容器集群管理平台,基于Go语言编写. 使用K8S,将简化分布式系统上的容器应用部署,使得开发人员可以专 ...

  3. MySQL存储 pymysql模块

    目录 pymysql模块 基本使用 cursor=pymysql.cursors.DictCursor 获取数据 fetchall 移动光标 scroll 增删改二次确认 commit autocom ...

  4. Mattermost 笔记

    目录 部署 配置 客户端 桌面程序 Android 使用 扩展 Jenkins Hubot 机器人 Jira GitHub Mattermost 是一个开源.可私有化部署的在线通讯平台,可以和Gith ...

  5. Redis 如何批量设置过期时间？PIPLINE的使用

    合理的使用缓存策略对开发同学来讲,就好像孙悟空习得自在极意功一般~ 抛出问题 Redis如何批量设置过期时间呢? 不要说在foreach中通过set()函数批量设置过期时间 给出方案 我们引入redi ...

  6. MongoDB6.0的安装「2023年」

    你好,我是悦创. 优质原文格式:https://bornforthis.cn/column/crawler/supplement/mongodb-install.html 点进去有惊喜. 吐槽,这篇博 ...

  7. Python实现k-近邻算法案例学习

    一.介绍 你好,我是悦创. 博客首发:https://bornforthis.cn/column/Machine-learning/informal-essay/01.html 本文是由给私教学员 c ...

  8. LibreOJ 144. DFS 序 1

    题面 给一棵有根树,这棵树由编号为 \(1\dots N\) 的 \(N\) 个结点组成.根结点的编号为 \(R\).每个结点都有一个权值,结点 \(i\) 的权值为 \(v_i\). 接下来有 \( ...

  9. CF构造题1600-1800（1）

    D. Same Count One(Polynomial Round 2022 (Div. 1 + Div. 2, Rated, Prizes!)) 题意 给定 \(n\) 个长度为 \(m\) 的 ...

  10. Axure 列表左右滑动交互-删除、置顶

    Axure 列表左右滑动交互 左滑:删除.标记 右滑:置顶.回复 拖一个动态面板,命名为[滑动面板],添加三个状态,并分别命名为:正常状态.向左状态.向右状态 添加元件 正常状态 向左状态 将[正常状 ...