js实现图片文件上传预览

2023-11-18

普通的上传图片选择图片后并不知道自己选择的什么图片,那么通过js我们可以做出预览效果这样就知道选择的什么图片,以免误上传!

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>js上传图片--预览图片</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    </head>
     
    <body>
        <form>
            <input type="file" onChange="preview(this)"/>
            <img src="" id="previewimg" width="50px" height="40px"/>
        </form>
        <script type="text/javascript">
            function preview(obj){
                var img = document.getElementById("previewimg");
                img.src = window.URL.createObjectURL(obj.files[0]);
            }
        </script>
    </body>
</html>

需要的朋友可以参考一下!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js实现图片文件上传预览 的相关文章

  • 样式媒体接收器源 (Chromecast)

    目前 我正在开发我的应用程序的 chromecast 集成 目前 您的投射接收器应用程序有 3 个选项 风格媒体接收器 默认媒体接收器 定制媒体接收器 我真的很喜欢媒体接收器的样式 因为以这种方式设计接收器的样式非常容易 然而 有时我真的很
  • 通过浏览器的“BACK”功能加载页面时触发 onload 脚本(js 或 jQuery)

    当通过浏览器的 后退 按钮或键盘命令到达页面时 我找不到执行脚本的方法 背景 我需要知道是否使用浏览器的 后退 按钮或键盘命令打开页面 然后我可以检查存储的 sessionStorage 变量并触发一些适当的内容 例如 如果我将其放入我的页
  • Javascript:在 For 循环中创建函数

    最近 我发现自己需要创建一系列函数 这些函数使用 XML 文档中的值 并且我使用 for 循环运行适当的节点 然而 在执行此操作时 我发现数组中的所有函数仅使用过 XML 表的最后一个节点 对应于 for 循环的最后一次运行 以下是展示这一
  • 自定义 OpenLayers 控件

    如何轻松自定义 OpenLayers 地图控件 或者至少 如何最小化控件的高度 谢谢 附言 有 CSS 覆盖吗 您可以对任何 openLayers 控件进行子类化 我刚刚通过对 PanZoomBar panZoomBar js 进行子类化
  • 如何将 ng-repeat 与图像映射区域标签一起使用?

    我正在尝试使用 AngularJS 创建可点击的汽车配置文件 一旦我将区域标签属性移动到 auto parts json 并将它们与 ng repeat 中的适当属性绑定 那么它就无法工作 如何修复它 请在全页预览中测试元素 var app
  • 将 h1 元素的内容复制到剪贴板?

    所以 我做了一个翻译器 但效果不是很好 但无论如何 它正在工作 我想尝试添加一些可以复制结果的内容 有没有办法做到这一点 以下是我的代码 提前致谢 我知道有一种方法可以通过输入来完成此操作 但我不确定是否可以通过标题来完成 var myTe
  • 从jquery获取httpreferrer的正确方法

    命令 document referrer 是使用 Jquery 获取引荐来源网址的正确方法吗 怎么样 document referrer
  • HTML5 Canvas 避免任何子像素渲染

    As seen here https stackoverflow com questions 7017998 html 5 canvas avoid fill behaviour on overlap我在画布中的亚像素精度方面遇到了一些问题
  • 有没有办法检测 Alt 键被按在哪一侧(右或左)?

    Is there a way that we can detect which side the Alt key was pressed on i e distinguish between left or right Alt I saw
  • “对象不是函数” - onclick 事件

    在开始之前 不 我没有发现分号的问题 并且我没有向函数传递任何值 当我尝试从控制台执行函数 login 时 它工作得很好 但是当我单击 HTML 输入按钮来调用它时 我收到 Uncaught TypeError object is not
  • 有没有办法将 Bootstrap 3.0 插件与 jQuery.noConflict() 一起使用?

    目前 我们的页面上加载了 2 个不同版本的 jQuery 1 4 2 和 1 10 1 和 window jQuery 对象当前指向 1 4 2 我们使用版本 1 10 1 的 noConflict 将其设置为 jq1 var jq1 jQ
  • 将“密码”类型添加到 Google Apps 脚本输入框

    是否可以将 密码 类型分配给 Google Apps 脚本输入框 以便不显示文本 以下工作正常 但输入字段是一个简单的文本框 并显示文本而不是 Browser inputBox Please enter your password 我有一个
  • Highcharts.js 中的列之间的空间

    我有一个柱形图 其中对于每个 X 值我有两个系列 但该图显示每个 X 值之间的间距很宽 在 Highchart 中如何使列和 y 轴之间有 1px 的空间 Update pointPadding 0 2 to pointPadding 0
  • 从状态提供者的解析方法更改角度应用程序的状态

    我在我的角度应用程序中使用 ui router 目前我有两条路线 signin 和 user 最初 当用户单击登录按钮时 它显示 signin 我发送 ajax 请求并获取用户 ID 我将用户 ID 存储在 localstorage 中并将
  • 启用 Chrome Headless 时 Dusk 测试失败

    我有一个 HTML 元素 该元素应该仅在第一页加载时显示 Javascript 设置 cookie 如果设置了 cookie 则不会显示该元素 PHP 检查 cookie 如果 cookie 存在 则不会呈现内容 我正在尝试为此进行 lar
  • 谷歌距离矩阵 API

    我正在尝试获取direction in traffic 使用常规路线 API 不会返回该值 我发现有一个字段distancematrixapi 就是这样做的 当我从自己的机器上运行该代码时 该代码可以工作 但是一旦上线 我就会看到有关的错误
  • 将范围传递给 forEach

    我正在尝试使用回调方法addToCount而不是匿名函数forEach 但我无法访问this count其中 返回undefined function Words sentence this sentence sentence this c
  • Javascript 是否处理整数上溢和下溢?如果是,怎么办?

    我们知道Java不处理下溢和溢出 https stackoverflow com questions 3001836 how does java handle integer underflows and overflows and how
  • Materialize CSS,显示自动完成芯片的图像

    文档物化芯片 http materializecss com chips html展示您可以用图像制作芯片 div class chip img src images yuna jpg alt Contact Person Jane Doe
  • CSS3 过渡卡住了

    我们的新网站上正在进行很多转换 有一个特别之前工作得很好 但自从添加谷歌地图后 某种过渡效果不会触发 此外 它还会禁用网站上的所有其他过渡效果 直到触发另一个 javascript 函数 我不知道为什么 但这些就是事实 该问题似乎仅限于 S

随机推荐

  • cuda矩阵乘法(简单理解)

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 CUDA矩阵乘法 矩阵规模 一 一维并行 1 一维线程并行 thread 2 一维块线程并行 block 3 一维共享A一行程并行 shared 二 二维并行 1 共享存储二
  • 差分 【一维差分和二维差分】

    全文目录 一维差分 差分数组的构建 二维差分 差分矩阵的构建 一维差分 首先来了解一下差分的性质 差分是前缀和的逆运算 如果说前缀和是 S f n 那么差分就是 D f 1 n 也就是说 原数组是差分数组的前缀和 原数组 a i 差分数组
  • 自动化测试系列 —— UI自动化测试

    UI 测试是一种测试类型 也称为用户界面测试 通过该测试 我们检查应用程序的界面是否工作正常或是否存在任何妨碍用户行为且不符合书面规格的 BUG 了解用户将如何在用户和网站之间进行交互以执行 UI 测试至关重要 通过执行 UI 测试 测试人
  • 全球及中国可穿戴医疗设备市场潜力分析与投资动态调研报告2022-2028年

    全球及中国可穿戴医疗设备市场潜力分析与投资动态调研报告2022 2028年 修订日期 2022年2月 出版单位 鸿晟信合研究院 对接人员 周文文 内容分析有删减 了解详情可查看咨询鸿晟信合研究院专员 目录 第一章 可穿戴医疗设备行业相关概述
  • VS2019或者VS2017创建ASP.NET项目

    最近在学 NET Web应用程序开发 做个记录 默认大家的本机的IIS服务已经搭建好了 没有搭建好的自行百度 文章目录 首先是VS的相关配置 然后是项目的创建 发布网站 项目的发布 IIS配置 一 首先是VS的相关配置 首先打开VS2019
  • C# 获取本地主机IP地址

  • 数据库----------唯一约束、默认约束、零填充约束

    目录 1 唯一约束 Unique 1 概念 2 语法 3 添加唯一约束 4 删除唯一约束 2 默认约束 default 1 概念 2 语法 3 添加默认约束 4 删除默认约束 3 零填充约束 zerofill 了解即可 1 概念 2 操作
  • R语言基础

    专注系列化 高质量的R语言教程 推文索引 联系小编 付费合集 本篇总结一些关于工具包的问题 所指的 工具包 对应的英文原文是package s 本篇目录如下 1 工具包简介 2 安装工具包 2 1 CRAN 2 2 GitHub 2 3 离
  • SQL注入——DNSLOG注入

    SQL注入 DNSLOG注入 SQL注入 DNSLOG注入 SQL注入 DNSLOG注入 一 原理 一 原理 当我们遇到盲注漏洞的时候 注入过程没有回显 手工测试会花费大量的时间 如果用sqlmap跑数据的话 实际应用中很可能被目标服务器直
  • 如何在PyCharm中对自己的pySC2 Agent代码进行Debug

    PySC2环境在Win10系统上的部署与安装 请参考 https blog csdn net qq 38962621 article details 112798659 spm 1001 2014 3001 5501 PySC2自定义Age
  • docker单机编排工具docker-compose

    编排工具安装 本文为在linux系统中操作 首先是安装epel源 然后安装python的pip组件 利用pip安装docker compose 在安装完毕后 可以使用查看版本命令以及帮助命令查看所支持的子命令 wget O etc yum
  • CRM管理软件有哪些?这5款好用的CRM软件值得推荐!

    CRM软件最常在销售部门实施 作为销售人员自动化的中心枢纽 包括联系人 客户和机会管理 CRM软件通常与其他企业解决方案 例如ERP系统 营销自动化软件和客户服务软件 分开交付 但通常与其他业务应用程序集成以促进增强和协调的客户体验 目前市
  • 嵌入式常用通讯协议1(UART 、RS232、RS485、SPI、IIC)

    目录 1 常用通讯协议汇总 2 常见的电平信号及其电气特性 2 1 TTL电平 2 2 CMOS电平标准 2 3 RS232标准 2 4 RS485标准 3 UART 通用异步收发器 协议 3 1 UART定义 3 2 UART作用 3 3
  • LeetCode刷题C++

    5 最长回文字符串 给你一个字符串 s 找到 s 中最长的回文子串 划定步长 遍历判断 class Solution public string longestPalindrome string s if s size lt 2 retur
  • Vue 引入G2图表

    安装G2依赖 npm install antv g2 npm install antv data set vue ge 在Vue main js文件中引入G2 import G2 from antv g2 Vue use G2 模板中使用完
  • 深入理解链表:一种动态的线性数据结构

    文章目录 前言 1 概述 2 单向链表 3 单向链表 带哨兵 4 双向链表 带哨兵 5 环形链表 带哨兵 6 结语 前言 链表是我们在日常编程中经常使用的一种数据结构 它相比于数组具有更好的动态性能 但是 对链表的深入理解需要我们掌握其内在
  • Linux项目自动化构建工具-make/Makefile (●‘◡‘●)

    目录 1 为什么要使用make 2 makefile的基本语法与变量 1 为什么要使用make 假设我们的执行文件里面包含2个源文件 分别是main c test c 如果想要这个程序运行起来 那么就需要先编译 先对源文件进行编译 产生te
  • C语言之基本数据类型

    在学习C语言的时候 我们可能首先面对的就是C语言中基本的数据类型 下面来看一下C语言中一些基本的数据类型 基本数据类型 void 声明函数无返回值或无参数 声明无类型指针 显示丢弃运算结果 C89标准新增 char 字符型类型数据 属于整型
  • C++(22)——容器的迭代器失效问题

    前言 我们在之前的学习中已经实现过list和vector的迭代器 那么在面试中经常会有面试官问到有关于迭代器的失效问题 那么为什么迭代器会失效呢 原因 随着VS版本的迭代 g 版本的迭代 C 标准库容器以及迭代器的源码都有比较大的修改 但是
  • js实现图片文件上传预览

    普通的上传图片选择图片后并不知道自己选择的什么图片 那么通过js我们可以做出预览效果这样就知道选择的什么图片 以免误上传