<!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. openpyxl写数据

    import osimport openpyxlos.chdir(r'D:/openpyxl') wb = openpyxl.Workbook() sht = wb.create_sheet('dat ...

  2. flutter系列之:如丝般顺滑的SliverAppBar

    目录 简介 SliverAppBar详解 SliverAppBar的使用 总结 简介 对于一个APP来说,肯定会有一个AppBar,这个AppBar一般包含了APP的导航信息等.虽然我们可以用一个固定 ...

  3. [攻防世界][江苏工匠杯]easyphp

    打开靶机url,上来就代码审计 <?php highlight_file(__FILE__); $key1 = 0; $key2 = 0; $a = $_GET['a']; $b = $_GET ...

  4. C/C++随堂笔记

    注释:行注释 块注释: (1)#if 0 #endif (2)/*     */ <>:表示系统文件 <stdlib.h>+syetem 调用windows中的程序 QT中 c ...

  5. P1024 [NOI2001] 食物链【种类并查集】

    题意 P1024 简化题意:给定 \(n\) 和 \(k(n\leqslant5\times10^4,k\leqslant10^5)\) ,表示有 \(n\) 个动物, \(k\) 个描述,其中: \ ...

  6. [深度学习] tf.keras入门2-分类

    目录 Fashion MNIST数据库 分类模型的建立 模型预测 总体代码 主要介绍基于tf.keras的Fashion MNIST数据库分类, 官方文档地址为:https://tensorflow. ...

  7. 旧酒换新瓶,新版M1/M2芯片Macos(Ventura)安装古早版本Python2.7(Python2.x)

    向下兼容特性是软件开发系统的一个重要指标,它是指一个新的系统或者软件能够与旧的系统或软件兼容并正常运行.这意味着旧系统或软件可以在新系统或软件中使用,而不会出现问题.向下兼容对于提高软件或系统的可用性 ...

  8. ffmpeg第8篇：使用ffprobe采集文件信息

    1. 前言 ffprobe是ffmpeg的其中一个模块,主要用于查看文件信息,咱们知道一个MP4文件其实不仅仅包含了音视频数据,还有如元数据等其它信息,但是实际上咱们关心的往往是音视频数据部分,今天来 ...

  9. [cocos2d-x]从源码角度思考convertToWorldSpace()与convertToWorldSpaceAR()坐标系的转换

    convertToWorldSpace() 话不多说,先上源码,之后再慢慢讲解: (5和6图截图的时候重复了,这里就不弄出来了) 只要通过图1到图8中我写的注释进行分析(不懂的地方可以自己去翻一下co ...

  10. .NET周报【1月第2期 2023-01-13】

    国内文章 [ASP.NET Core]按用户等级授权 https://www.cnblogs.com/tcjiaan/p/17024363.html 本文介绍了ASP.NET Core如何按照用户等级 ...