JS预览图像将本地图片显示到浏览器上
时间：2024-04-18 09:35:21
<!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>
标签：JS预览图像,本地图片
0
投稿猜你喜欢
MySQL中分页优化的实例详解
2024-01-27 03:46:35
各种语言、服务器301跳转代码全集
2023-07-23 04:24:45
phpstorm断点调试方法图文详解
2023-05-30 01:06:40
python做图片搜索引擎并保存到本地详情
2021-08-27 01:42:33
如何判断元素是否为HTMLElement元素
2024-04-18 10:15:27
微信小程序学习笔记之本地数据缓存功能详解
2024-04-22 12:42:49
HTML编辑器FCKeditor使用详解
2010-02-28 12:30:00
Go语言基础结构体用法及示例详解
2024-04-25 15:11:34
Oracle数据库编写有效事务指导方针
2009-03-19 17:41:00
使用PHP实现生成HTML静态页面
2023-11-14 11:14:41
浅谈Python 的枚举 Enum
2021-02-01 16:42:15
python深度学习tensorflow训练好的模型进行图像分类
2023-02-20 20:40:37
Python中操作mysql的pymysql模块详解
2024-01-14 08:14:32
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2021-03-20 19:55:17
如何在Linux 系统中使用apt 包管理器安装 Git LFS
2022-08-29 15:33:30
MYSQL METADATA LOCK(MDL LOCK)MDL锁问题分析
2024-01-15 04:45:54
使用Python和xlwt向Excel文件中写入中文的实例
2023-08-27 19:18:08
python之js逆向功能演示详解
2023-09-01 13:49:29
解决Python3错误:SyntaxError: unexpected EOF while parsin
2022-02-08 10:18:32
MySQL设置global变量和session变量的两种方法详解
2024-01-20 23:34:16
