<!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. 重学c#系列——linq(1) [二十七]

    前言 简单介绍一下linq,linq很多人其实用的很熟练了,但是有些人不知道自己用的是linq. 正文 在介绍linq 之前,先介绍一下集合. public interface ICollection ...

  2. Linux NTP工具的基本使用

    NTP 时间同步 NTP(Network Time Protocol)协议,网络时间协议.利用ntp协议可以实现网络中的计算机时间同步. 实现NTP协议的工具: ntpdate:只能同步一次时间 nt ...

  3. NET-Core利用etag进行浏览器缓存

    title: .NET Core浏览器缓存方案 date: 2022-12-02 14:17:36 tags: - .NET 缓存介绍及方案 在后端开发中经常会使用缓存来提高接口的响应速度,降低系统的 ...

  4. TCP\ip 地址总结

    127.0.0.1 本地回环地址,一般用于测试网卡是否正常工作 192.168.1.0 代表网络地址一个网络段 192.168.1.1-254 可用网络地址 192.168.1.255 广播地址!  

  5. Java学习笔记：2022年1月9日(其一)

    Java学习笔记:2022年1月9日(其一) 摘要:这篇笔记主要记录了Java运行时中的两种变量.以及参数的两种传递方式. 目录 Java学习笔记:2022年1月9日(其一) 1.不同变量的详细探讨 ...

  6. lock 和 Monitor （转载）

    Lock和Monitor都是对被操作对象同步控制的方法 Lock 是 Monitor的简化版本,IL callvirt ...Monitor.Enter(object)...leave.s.... c ...

  7. angular配置多个系统 配置动态路由，缩短模块初次加载时间，快速打开界面，优化用户访问体验

    1.配置一个文件,返回系统名称 2.配置routes-routing.module.ts 引入文件 const system = 服务.getsystem() const allROUTES: {UR ...

  8. three.js一步一步来--如何画出一个转动的正方体

    基础知识--正方体代码如下 <template> <div style="width:1000px; height:800px"> <h1>正方 ...

  9. render到底是什么，该如何使用它

    一.前言 1.vue程序的运行过程:模板 -> 进行编译 -> 生成ast树 -> 数据绑定 -> 生成render函数 -> 成虚拟dom树 -> 真实dom树 ...

  10. Python对字典进行赋值操作时报错：“Cannot assign to function call”解决方案

    今天编程时对字典进行赋值操作时报错"Cannot assign to function call": 翻译一下就是无法分配函数调用的空间. 我很纳闷,因为前面都可以正常调用dict ...