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> 
时间: 2024-11-06 07:49:06

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

Java+Json+JQuery将本地文件显示在网页上

前段时间为是练习JQuery和Java遍历目录,写了一个JavaWeb(使用Jsp+Servlet)的例子.源代码下载:https://github.com/liaoyu/uudisk 上述源码是Myeclipse新建的项目,需要配置一些环境,比如JRE路径,以下是运行截图,界面模仿新浪微盘 工作原理就是通过Java遍历系统(Windows)的目录,前台通过点击图标以ajax方式触发事件,后台以json数据的形式把文件结构返回给前台,前台通过JS解析JSON数据内容,展示不同的图片.目前尚存在的

点击跳转到系统图库,然后将选择回来的图片显示到应用上

有时候需要跳转到系统图库选图,那么用以下代码实现 /**点击跳转到系统图库,然后将选择回来的图片显示到应用上*/ public class MainActivity extends Activity { private ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.act

js 预览本地上传图片

网址http://jingyan.baidu.com/article/215817f78370dd1edb142372.html <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td height="101" align="

将摄像头拍摄图像或者本地图片设置为头像的方法

一:效果图 效果描述:点击相框,将手机摄像头拍摄的图片或者本地图片设置为我们定义的头像 功能控件:UIImageView , UIAlertController , UITapGestureRecognizer , UIImagePickerController 首次运行的时候会提醒是否允许程序访问手机相册,点击ok     二:工程图 三:代码区 AppDelegate.h #import <UIKit/UIKit.h> @interface AppDelegate : UIResponde

vue 实现图片上传与预览,以及清除图片

vue写原生的上传图片并预览以及清除图片的效果,下面是demo,其中里面有vue获取input框value值的方法以及vue中函数之间的调用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片demo</title> <link rel="stylesheet" href="../../css/font-a

[pdf.js]预览pdf时,中文名称乱码的问题

在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" charset="gb2312"></script> 结果

js预览PDF文件,使用iframe实现

有时候需要预览PDF文件,需要实现可放大.缩小.下载.打印等功能,我使用了iframe框架. 实现效果: 实现代码: 我直接写在了一个公共组件中,在需要预览的页面直接引用该子组件即可. <iframe :src="src" frameborder="0" style="width: 100%; height: 100%"></iframe> data() { return { src: 'http://storage.xu

java web图片显示到浏览器

今天研究了一下午,图片显示问题. jsp中获取绝对路径的方法:String contextPath = request.getContextPath();String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + contextPath;然后<img src="<%=path%>/.../scene.jpg&qu

网上打印纳税申报表等预览有网格打印不显示

现象: 网上报税等系统,浏览时有网格线,打选择打印就不显示网格线 解决方法: IE9及以前版本浏览器设置:IE浏览器中找文件-页面设置-勾选打印背景颜色和图像即可 IE9及以上浏览器设置:设置---打印---页面设置--勾选打印背景颜色和图像.