<!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. MVT模型与MVC模型的区别

    1. MVC设计模式 MVC 是 Model-View-Controller 的缩写,其中每个单词都有其不同的含义: Modle 代表数据存储层,是对数据表的定义和数据的增删改查: View 代表视图 ...

  2. ExcelToObject.NPOI 两行代码导出Excel报表、读取Excel数据

    简介 作为一个dotnet开发者,经常面对业务系统中大量报表导入导出,经常写了一堆的重复代码.最近发现一个操作excel的神器:ExcelToObject.NPOI,两行代码就能导出一个报表,两行代码 ...

  3. 第一百一十四篇: JS数组Array（三）数组常用方法

    好家伙,本篇为<JS高级程序设计>第六章"集合引用类型"学习笔记   1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill(). 这两 ...

  4. JavaScript中的防抖与节流-图文版

    01.防抖还是节流 防抖 与 节流 目的都是避免一定时间内,大量重复的操作造成的性能损耗.因此原理也类似,都是阻止过多的事件执行,只保留一部分来执行.适用场景略有不同,也有交叉,动手练习一遍就懂了. ...

  5. 【JVM】经典垃圾回收器

    本文已收录至Github,推荐阅读 Java随想录 微信公众号:Java随想录 CSDN: 码农BookSea 转载请在文首注明出处,如发现恶意抄袭/搬运,会动用法律武器维护自己的权益.让我们一起维护 ...

  6. YonBuilder移动开发平台功能大盘点

    YonBuilder是面向企业组织和个人开发者的低代码开发平台,实现无代码.低代码.专业代码开发三种模式.提供元数据驱动和画布构建两种开发方式,通过点击拖拽+自动化代码生成和移动多端编译的技术,与开放 ...

  7. vue使用echarts引入离线地图（geo.json）并切换省市（以四川为例）

    https://blog.csdn.net/weixin_43374193/article/details/95594419 https://blog.csdn.net/harrisonz8/arti ...

  8. 英华学堂网课助手Linux版本

    首先我们下去GitHub把文件下载下来记得 脚本地址: https://github.com/aoaostar/mooc/releases/latest 这几个版本随便下哪个都可以,下载完之后我们通过 ...

  9. 【好软推荐】Scoop - Windows快速软件安装指南

    在平常生活中如果要安装像git.java.node这些环境的时都需要先去官网下载安装程序,点击安装,之后还需要配置,不仅过程麻烦,而且工具多了之后整理起来也相当不容易,配置也很杂,整个电脑就像被污染了 ...

  10. SOFAJRaft源码阅读-Netty时间轮算法的实践

    SOFAJRaft的定时任务调度器是基于Netty来实现的,所以本文将会基于Netty时间轮算法,然后再结合SOFAJRaft源码进行分析. @Author:Akai-yuan @更新时间:2023/ ...