JS预览图像将本地图片显示到浏览器上_javascript技巧

复制代码 代码如下:

<!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>

时间: 2024-08-30 07:16:06

JS预览图像将本地图片显示到浏览器上_javascript技巧的相关文章

JS实现的图片预览插件与用法示例【不上传图片】_javascript技巧

本文实例讲述了JS实现不需要上传的图片预览插件与用法.分享给大家供大家参考,具体如下: 小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

js正则匹配出所有图片及图片地址src的方法_javascript技巧

本文实例讲述了js正则匹配出所有图片及图片地址src的方法.分享给大家供大家参考.具体分析如下: 有很多时候我们需要用到文章里面的图片,而且主要是用到它的图片地址,这个时候我们需要通过正则匹配出图片标签,然后做到我们需要的数据 平时也没怎么用正则,一不学就忘,最近项目需要,然后又去goole了,好乱!一搜一大堆,也不是我想要的,最后把自己留一个已被后用: 实现:通过js正则匹配出所有图片及所有图片地址src. 思路:1.匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符 从匹配出来的

JS实现的仿QQ空间图片弹出效果代码_javascript技巧

本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll

JavaScript限定图片显示大小的方法_javascript技巧

本文实例讲述了JavaScript限定图片显示大小的方法.分享给大家供大家参考.具体实现方法如下: /** * 限制图片显示的size. * * @param thisobj 图片组件 * @param limitW 限制宽度大小 * @param limitH 限制高度大小 */ function imageResize(thisobj, limitW, limitH) { var newW; var newH; if (thisobj.width > limitW) { newW = lim

js带前后翻页的图片切换效果代码分享_javascript技巧

本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu

JS对img进行操作(换图片/切图/轮换/停止)_javascript技巧

复制代码 代码如下: <script type="text/javascript"> var i = 1; var n; function showImg() { if (document.getElementById('img').getAttribute("src") == "images/1.jpg") { document.getElementById('img').setAttribute("src",&

JavaWeb将图片显示在浏览器中

一.背景 用户上传了一张图片,图片到服务器后用户得到一个链接,可以将图片显示在浏览器上. 二.实现 假设项目名叫TestProject,文件放在项目根目录下的uploadImages文件夹下. ①图片名为英文,可直接通过链接打开图片 <a href="http://localhost:8080/TestProject/uploadImages/myImage.jpg">预览图片</a> ②图片名含有中文,通过Servlet将图片输出到浏览器上,使用图片在服务器上

javaweb图片显示在浏览器的问题

问题描述 javaweb图片显示在浏览器的问题 请问下如何将保存在服务端的一大批图片显示在浏览器上,业务逻辑是怎么样的? 我的项目用的是jersey框架,前端是html,照片保存在服务端的文件夹中,我想 让它们显示在浏览器中.我试过后台穿路径给前端,然后用img去显示,但这种方 法每当我新增加一张图片时,刷新后不能及时显示,需要清空缓存再刷新才出来? 求一种批量显示图片在浏览器段的方法的. 解决方案 原文地址:点击打开链接 一.背景 用户上传了一张图片,图片到服务器后用户得到一个链接,可以将图片

前端-关于上传图片预览的时候,图片尺寸不统一,你们都是给客户怎么样显示的呢?

问题描述 关于上传图片预览的时候,图片尺寸不统一,你们都是给客户怎么样显示的呢? 无图片时: 有图片时,宽度100%,但是高度过小: 这种情况下怎么样处理比较美观??? 解决方案 我没有弄过这样的,不过我觉得楼主可以参考下面三种方案:①参照QQ.微信等上传头像时的做法,将用户剪辑图片时的范围内容用样式记住,然后显示,这样就比较统一.②背景图片拉伸,这样自然能够完全填充,不过看上去就不太美观了:③可以让预览图片在内容框上垂直居中,这个上下留白会比单纯的下边留白好看一些.当然,上面都这是我的假想,具