浏览器显示本地照片 image

<!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-12-17 10:22:25

浏览器显示本地照片 image的相关文章

react-native中显示本地照片或视频

主要是手机上的图片是用url引入的,而不是require引入 <Image style={{width:SCREEN_WIDTH-20,height:196,borderRadius:6}} source={(!store.get("picVisible") ? require('./img/arrive.png'):{uri:store.get("imgurl")})}/> 原文地址:https://www.cnblogs.com/xiaojieli/

选择本地照片之后即显示在Img中(客户体验)

最近转战MVC项目,然后又再次遇到照片上传的实现,之前都是使用ASP.NET,虽然也有照片上传,而且出于客户体验考虑, 也实现了选择本地照片之后即时显示在IMG中,在这里就简单介绍其实现(ASP.NET),代码就不再写了 ASP.NET实现方式(当时使用的是服务器控件UpLoad): 一个Img控件,一个UpLoad控件 先创建另一个新的ASP.NET页面,上传照片的时候,先把照片上传显示在这个ASP.NET页面上,然后IMG中的src链接到这个页面就O了(方法很笨,但是刚出来就是这么实现的,现

Django在浏览器上显示本地图片, 外部图片

摘自:https://blog.csdn.net/lvluobo/article/details/80945257 url的配置: 如何在浏览器上显示图片呢? Django项目在浏览器上显示本地图片,本来还以为直接放在虚拟机上,开启Django项目就可以访问到了,后来发现并不是这样的简单- 步入正题,如何在浏览器上显示本地图片,关键在于url的配置: url的配置: from django.views.static import serve url(r'^book/(?P<path>.*)$'

Atitit.&#160;html&#160;使用js显示本地图片的设计方案.doc

Atitit. html 使用js显示本地图片的设计方案.doc 1.  Local mode  是可以的..web模式走有的不能兰.1 2. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 2.1. div来完成 .filter1 2.2. URL.createObjectURL (html5 api  ma sida)2 2.3. Css 背景(吗四大)2 2.4. 这是Data URI scheme (base64).2 3. --code2 4. 参考2 1.  

兼容多浏览器的本地存储

在做考试系统时需要解决这样一个问题,就是当考生考试时可能出出现断网.关闭浏览器,刷新等问题,数据此时可能没有及时写入数据库,所以造成数据丢失问题,,所以这里就需要用到本地存储,以前的版本都是用cookie,但是不得不说cookie太小了,只有可怜的4k,而机房的网有时候实在是让人捉急,所以,考虑换一种方案. 直接读取XML实现方式 因为本地存储平时接触的不是太多,开始想的只是简单的读取本地的XML,做起来倒是挺容易的,一个语句就能搞定: <script language="javascri

JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简单的demo来实现 本地上传图片即时预览效果.其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果.在IE10以下浏览器用了滤镜来解决图片显示问题.在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,

Chrome 浏览器显示“网站连接不安全”,是什么原因?

Chrome 浏览器显示“网站连接不安全”,这可能是您最近访问网站时经常遇到的问题,浏览器地址栏中域名前面显示圆圈i图标和“不安全”字样,点击这个字样,就会看到红字警告“你与此网站之间建立的连接不安全”,这是怎么回事?这样的网站可以继续访问吗? Chrome 浏览器显示“网站连接不安全”的原因 “你与此网站之间建立的连接不安全”这是浏览器对HTTP网站的警告提示,这表示这个网站使用了HTTP协议传输数据,提醒用户谨慎访问网站. HTTP协议是明文传输协议,无法加密传输数据或校验数据完整性,也无法

在InternetExplorer.Application中显示本地图片

忘记了,喜欢一个人的感觉 Demon's Blog  ?  程序设计  ?  在InternetExplorer.Application中显示本地图片 ? 对VBS效率的再思考--处理二进制数据 WordPress判断用户是否登录 ? 在InternetExplorer.Application中显示本地图片 标题: 在InternetExplorer.Application中显示本地图片作者: Demon链接: http://demon.tw/programming/internetexplor

UIWebView显示本地图片的方法

在UIWebView显示本地图片,由此可借助UIWebView实现图文混排(内容编码成html格式即可). // ViewController.m // // Created by zc on 8/1/14. // Copyright (c) 2014 cuibo. All rights reserved. // #import "ViewController.h" @interface ViewController () <UIWebViewDelegate> @prop