<!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. CLion和动态链接库

    目录 生成链接库 链接库的使用 生成链接库 创建一个library项目 在项目中写好自己的代码 cmakelist cmake_minimum_required(VERSION 3.21) proje ...

  2. Spring02:注解IOC、DBUtils单表CRUD、与Junit整合

    今日内容:基于注解的IOC及IOC的案例 Spring中IOC的常用注解 案例-使用xml方式和注解方式实现单表的CRUD操作 持久层技术选型:DBUtils 改造基于注解的IOC案例,使用纯注解的方 ...

  3. Vue 响应式原理模拟以及最小版本的 Vue的模拟

    在模拟最小的vue之前,先复习一下,发布订阅模式和观察者模式 对两种模式有了了解之后,对Vue2.0和Vue3.0的数据响应式核心原理 1.Vue2.0和Vue3.0的数据响应式核心原理 (1).  ...

  4. Django框架：10、Ajax补充说明、多对多三种创建方法、Django内置序列化组件、批量操作数据方法、分页器思路、form组件

    Django框架 目录 Django框架 一.Ajax补充说明 1.针对前端回调函数接受值的说明 二.多对多三种创建方式 1.自动创建 2.纯手动创建 3.半自动创建 三.Django内置序列化组件 ...

  5. 1、Java数据类型

    1.基本数据类型的变量: /** * 1.基本数据类型的变量: * * 1).整数类型:byte(1字节=8bit),short(2字节),int(4字节),long(8字节) * * 2).浮点数类 ...

  6. 在windows上构建OpenCascade

    基于作者QuaoarsWorkshop的视频Open Cascade Lessons,讲的非常详细,观看需要魔法 什么是OCCT?. 首先,Open CASCADE Technology SDK 是一 ...

  7. [编程基础] C++多线程入门6-事件处理的需求

    原始C++标准仅支持单线程编程.新的C++标准(称为C++11或C++0x)于2011年发布.在C++11中,引入了新的线程库.因此运行本文程序需要C++至少符合C++11标准. 文章目录 6 事件处 ...

  8. Spark详解(02) - Spark概述

    Spark详解(02) - Spark概述 什么是Spark Hadoop主要解决,海量数据的存储和海量数据的分析计算. Spark是一种基于内存的快速.通用.可扩展的大数据分析计算引擎. Hadoo ...

  9. Docker部署python-Flask应用

    title: Docker部署python Flask应用 date: 2022-11-19 13:00:25 tags: - python 环境 系统:windows10 python:python ...

  10. [C++]bitwise和memberwise的区别

    在看<深入探索C++对象模型>这本书的时候,我看见了bitwise senimatics和memberwise senimatics,看的时候还不清楚这两个是什么意思,书本上直接使用的是英 ...