<!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. 【Spring系列】- Spring循环依赖

    Spring循环依赖 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! 目录 Spring循 ...

  2. 【数据库】pgsql窗口函数，分组求sum的方式

    select distinct    quantity,    standard_cost,    sum(a.quantity*a.standard_cost) over(partition by ...

  3. windows安装grunt时提示不是内部或外部命令解决方案

    参考:https://www.cnblogs.com/hts-technology/p/8477258.html 安装windows安装elasticsearch-head时 不需要输入grunt s ...

  4. 使用mysqldump备份与还原的mysql数据库

    使用mysqldump备份与还原的mysql数据库 一.mysqldump命令介绍 1.mysqldump -help 查看命令介绍: mysqldump --help 2.mysqldump登录选项 ...

  5. eval解析的函数传参 object array

    1 const fn = (...args) => { 2 console.log(...args) 3 } 4 5 const handleEval = (fnName,...args) =& ...

  6. 异构混排在vivo互联网的技术实践

    作者:vivo 互联网算法团队- Shen Jiyi 本文根据沈技毅老师在"2022 vivo开发者大会"现场演讲内容整理而成. 混排层负责将多个异构队列的结果如广告.游戏.自然量 ...

  7. uniapp开发微信小程序

    uni-app介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉 ...

  8. linux系统中安装虚拟机

    在linux系统中,利用图形化界面安装虚拟机.首先启动 virt-manager,当然没有安装 virt-manager需要先安装好. 1 $ apt-get install virt-manager ...

  9. [机器学习] Yellowbrick使用笔记3-特征分析可视化

    特征分析可视化工具设计用于在数据空间中可视化实例,以便检测可能影响下游拟合的特征或目标.因为ML操作高维数据集(通常至少35个),可视化工具将重点放在聚合.优化和其他技术上,以提供对数据的概述.这是Y ...

  10. Pytorch基础-tensor数据结构

    torch.Tensor Tensor 数据类型 Tensor 的属性 view 和 reshape 的区别 Tensor 与 ndarray 创建 Tensor 传入维度的方法 参考资料 torch ...