上传图片时JS自动显示图片

javascript 图片预览

function preview(imgFile,num)
{
//预览代码，支持 IE6、IE7。
var newPreview = document.getElementById("preview1");
var t ;
if(document.all) //IE
t = imgFile.value;
else
t = imgFile.files[0].getAsDataURL(); //FF
newPreview.style.backgroundImage = "url(" + t + ")";//imgFile.value;
newPreview.style.width = "108px";
newPreview.style.height = "130px";
newPreview.style.display = "block";
}

function ShowImg(o)
{
//var Browser_Agent=navigator.userAgent;
//if(Browser_Agent.indexOf("Firefox")!=-1)
//{
//火狐使用
// document.getElementById("idImg").src=o.files[0].getAsDataURL();
// document.getElementById("idImg").style.display = "block";
// }
//else
//{
preview(o,1);
//}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • asp.net下用js实现鼠标移至小图，自动显示相应大图

    实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 .Net精简版本 <script language="JavaScript"> function GetShowImg(imgfile) { document.all("ShowImage").src = "/semir/images/"+ imgfile; } </script> //DataList绑定 <asp:datalist id="DlSi

  • 鼠标悬浮停留三秒后自动显示大图js代码

    鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的 <style> *{margin:0;padding:0;list-style-type:none;} img,a{border:0;} .piccon{height:75px;margin:100px 0 0 50px;} .piccon li{float:left;padding:0 10px;} #preview{position:absolute;border:1px solid #ccc;background:#333;paddin

  • JS测试显示屏分辨率以及屏幕尺寸的方法

    如何用JS特效显示自己的屏幕分辨率以及屏幕尺寸呢?请看下面一段代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jquery和js实现对div的隐藏和显示方法

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

  • ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    由于某种原因,需要做一个控制grid列显示的checkboxgroup,虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,但是有这样的需求(需要一目了然) 下面先上图 接着前几天做的工作,今天上午完成了定制字段,思路是在上面的普通查询或者高级查询结束以后,获得了列的fields,columns等信息,然后交给一个处理函数 makeCustomMadePanel,该函数用来生成checkboxgroup,生成的时候给它加上一个事件,原本以为checkbox会有类似于check的

  • jsp中文显示问号问题解决方法

    问题: jsp中想要输出的中文被显示成"?" 解决方法 : 在eclipse-windows- preferences中 搜索jsp , Encoding选项中选择 Chinese . 这样新建的jsp文件将支持中文显示. 对已经存在的jsp文件做如下修改: 将各种编码方式都改成GB18030,如下: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=GB18030

  • js父页面与子页面不同时显示的方法

    本文实例讲述了js父页面与子页面不同时显示的方法,可实现打开一个页面后,父页面DISABLE,在子页面关闭后,父页面ENABLE.分享给大家供大家参考.具体方法如下: 复制代码 代码如下: function onNewClick() {     var url = "VesselScheduleNEW.aspx";     if (null!=newWin && newWin.closed) newWin=null;        if (null==newWin)  

  • JS输入用户名自动显示邮箱后缀列表的方法

    本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

  • 上传图片时JS自动显示图片

    javascript 图片预览 function preview(imgFile,num) { //预览代码,支持 IE6.IE7. var newPreview = document.getElementById("preview1"); var t ; if(document.all) //IE t = imgFile.value; else t = imgFile.files[0].getAsDataURL(); //FF newPreview.style.backgroundI

  • js变换显示图片的实例

    js变换显示图片的实例

    开始界面如图: 复制代码 代码如下: <head>    <title></title>   <script type="text/javascript">       function UpdateImg() {           //document.getElementById('img1').setAttribute('src', 'images/2.jpg');           var dogandcat = docume

  • 原生js代码实现图片放大境效果

    原生js代码实现图片放大境效果

    今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果. 第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片.这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果. <!DOCTYPE

  • JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

    JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

    本文实例讲述了JS+HTML实现自定义上传图片按钮并显示图片功能的方法.分享给大家供大家参考,具体如下: 在web开发中,上传文件功能通过type为file的input标签即可实现.但input的显示效果仅为一个按钮,且不能修改UI.如果要实现自定义上传按钮,一般需要设置input为不可见,然后将input与自定义界面放在同一个div中,并将input铺在界面上方: <!DOCTYPE html> <html> <head> <meta http-equiv=&q

  • JS实现页面载入时随机显示图片效果

    本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

  • js实现固定显示区域内自动缩放图片的方法

    本文实例讲述了js实现固定显示区域内自动缩放图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • js实现上传图片并显示图片名称

    本文实例为大家分享了js上传图片并显示图片名称的具体代码,供大家参考,具体内容如下 今天整理了一下上传图,用jquery的还是方便点,小女子整理的是原生的js!!! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> img{max-width: 100%; he

  • 原生JS实现隐藏显示图片 JS实现点击切换图片效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <

  • JS实现控制图片显示大小的方法【图片等比例缩放功能】

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    本文实例讲述了JS实现控制图片显示大小的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • js实现头像图片切割缩放及无刷新上传图片的方法

    本文实例讲述了js实现头像图片切割缩放及无刷新上传图片的方法.分享给大家供大家参考.具体如下: fname:后台接收时用的名字, 必填 funstr:开始上传执行的函数, 默认无 funbak:上传成功后的回调函数, 必填 furl:上传地址: 默认当前form的提交页面 注意:上传地址和当前地址必须为同意域名否则回调函数获取不到 上传成功发回的地址.   a.php: $path='a.jpg'; move_uploaded_file($_FILES['uimg']['tmp_name'],$

随机推荐