JS预览图像将本地图片显示到浏览器上
发布时间：2024-04-18 09:35:21
标签：JS预览图像,本地图片
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/**
* 从 file 域获取 本地图片 url
*/
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
/**
* 将本地图片 显示到浏览器上
*/
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
</script>
</head>
<body>
<form action="">
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
<img id="imgPre" src="" width="300px" height="300px" style="display: block;" />
</form>
</body>
</html>
0
投稿猜你喜欢
- 在使用json.dumps时要注意一个问题>>> import json>>> print json.d
- 1) 首先安装docker：# 用 yum 安装并启动yum install docker -y && systemctl
- 1、手动调参，但这种方法依赖于大量的经验，而且比较费时。许多情况下，工程师依靠试错法手工调整超参数进行优化，有经验的工程师可以在很大程度上判
- 看看下面：<％Set objQuery = Server.CreateObject("ixss
前言我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须面对.因此,学习是- 在ASP.NET2.0通过SMTP的验证发送EMAIL ，代码如下：’Create a new MailMes
- 在document.form1.submit();后加document.body.innerHtml = "W
- Python获取多线程返回结果在 Python 的多线程中，有时候我们会需要每一个线程中返回的结果。然而，在经过我的多番尝试、以及网上各种博
- 我们经常会看到后缀名为.pt, .pth, .pkl的pytorch模型文件，这几种模型文件在格式上有什么区别吗？其实它们并不是在格式上有区
- 问题描述（以下讨论范围仅限Windows环境）： D:\develop\ide\mysql\mysql5.5\bin> mysql -
- 本文实例为大家分享了python字符串循环左移的具体代码，供大家参考，具体内容如下字符串循环左移给定一个字符串S[0…N-1]，要求把S的前
- 装饰器基本概念大家都知道装饰器是一个很著名的设计模式，经常被用于 AOP (面向切面编程)的场景，较为经典的有插入日志，性能测试，事务处理，
- RPA流程自动化过程中，遇到时间的相关操作时，可以调用datetime库的一些方法进行处理。datetime 是 Python 处理日期和时
- Python 3.8是Python语言的最新版本，它适合用于编写脚本、自动化以及机器学习和Web开发等各种任务。现在Python 3.8已经
- 目录生成迷宫走出迷宫可视化总结相信大家都玩过迷宫的游戏，对于简单的迷宫，我们可以一眼就看出通路，但是对于复杂的迷宫，可能要仔细寻找好久，甚至
- 1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent> <child
- 准备1、下载所需安装包wget https://www.php.net/distributions/php-7.4.0.tar.gzwget
- 本文所述实例来自独立软件开发者 Alex Marandon，在他的博客中曾介绍了数个关于 Python Collection 的实用小技巧，
- 1. 通过windows attrib 命令获取文件隐藏属性Syntax ATT
- 本文实例为大家分享了python实现二维数组的对角线遍历，供大家参考，具体内容如下第一种情况：从左上角出发，右下角结束要完成的事情，就像下图
