`
yw404109794
  • 浏览: 4308 次
  • 性别: Icon_minigender_1
  • 来自: 冥王星
文章分类
社区版块
存档分类
最新评论

javaScript 产生本地图片预览

阅读更多
//此为不按比例显示在固定区域内(td div img 标签中都OK 支持IE6以上版本)显示,
如:
<img id="img"  STYLE="visibility:hidden" height="100px" width="100px">
调用方法:onfocus=
"javascript:ShowImage(this.value,document.getElementById('img'))"   
<script language="javascript" type="text/javascript">
	//==============================
	//功能:Javascript本地图片预览
	//Date:2009-09-24
	//说明:简单的判断了文件的合法性
	//适用于:上传文件前预览本地图片
	//==============================
 	function ShowImage(value,img)
    {
    		//alert(value);
    		//检测盘符
    		//alert(value.indexOf(':'));
    		//检测文件是否有扩展名
    		//alert(value.length-value.lastIndexOf('.'));
    		//取文件扩展名
    		//alert(value.substr(value.length-3,3));
    		//检测文件扩展名是否合法
    		//alert(CheckExt(value.substr(value.length-3,3)));

        if(value.length>5&&value.indexOf(':')==1&&(value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3)))
        {
            img.src=value;
            img.alt="本地图片预览";
            img.style.visibility="visible";
        }
        else
        {
					img.style.visibility="hidden";
			  }
    }
    //检查扩展名是否合法,合法返回True
    function CheckExt(ext)
    {
    	//这里设置允许的扩展名
    	var AllowExt="jpg|gif|jpeg|png|bmp";
    	var ExtOK=false;
			var ArrayExt;
			if(AllowExt.indexOf('|')!=-1)
			{
				ArrayExt=AllowExt.split('|');
				for(i=0;i<ArrayExt.length;i++)
				{
					if(ext.toLowerCase()==ArrayExt[i])
					{
						ExtOK=true;
						break;
					}
				}
			}
			else
			{
				ArrayExt=AllowExt;
				if(ext.toLowerCase()==ArrayExt)
				{
					ExtOK=true;
				}
			}
			return ExtOK;
    }
</script>

//另一种是按图片比例压缩显示
//目前测试成功的只有IE浏览器,只能在标签(td和div中正常运行)如:
<td  valign="top" class="fontStyle" id="preview" >
调用方法:
<input type="file" id="userFile" style="width: 250px; font-size: 12px; color:#333333"; name="userFile" maxlength="400"
onchange="showPic()" />
function showPic()
{
var fileext=document.addSeal.userFile.value.substring(document.addSeal.userFile.value.lastIndexOf("."),document.addSeal.userFile.value.length)
        fileext=fileext.toLowerCase()
        if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.png'))
        {
            alert("友情提示:请上传规定格式的图片,谢谢 !");
             document.addSeal.userFile.focus();
        }
        else
        {
        //alert(''+document.addSeal.userFile.value)//把这里改成预览图片的语句
  document.getElementById("preview").innerHTML="<img src='"+document.addSeal.userFile.value+"' width=120 style='border:6px double #ccc'>"
        }
}


分享到:
评论

相关推荐

    精通javascript

    2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....

    精通JavaScript

    2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....

    NTKO OFFICE痕迹保留文档控件.rar

    8.支持从服务器URL或本地直接插入透明浮动图片到Word,Excel文档 ; 9.支持将手工绘制的图片作为透明浮动的图片增加到Word,Excel文档 ; 10.全面支持Office2000的打印预览 11. 轻量级,只有不足50K 使用C语言直接...

    NTKO文档在线编辑控件独立安装包4.0.6.5(适合TA2009\2010\2011版本)

    ★ 支持从服务器URL或本地直接插入透明浮动图片到Word,Excel文档 新增加的AddPicFromURL和AddPicFromLocal函数可以直接从URL或本地插入透明的浮动图片到Office文档 ★ 支持将手工绘制的图片作为透明浮动的图片增加...

    《javaScrip开发技术大全》源代码

    • sample28.htm 捕捉异常(捕捉JavaScript产生的异常) • sample29.htm 抛出不同的异常 • sample30.htm 抛出不同的异常(多catch语句块) • sample31.htm finally语句 • ...

    NTKO文档在线编辑控件4.0.1.2

    20 支持从服务器URL或本地直接插入透明浮动图片到Word,Excel文档 新增加的AddPicFromURL和AddPicFromLocal函数可以直接从URL或本地插入透明的浮动图片到Office文档 21 支持将手工绘制的图片作为透明浮动的图片增加...

    xheditor-1.1.14

    说明:当localUrlTest测试为false时,会将图片URL发往当前参数指定的服务器端上传接收程序,抓取成功后将本地URL返回并替换 备注:v1.1.8新添加 readTip:无障碍读屏提示 参数值:字符串(默认为空) 说明:无障碍读屏...

    covid-helix:当前COVID 19爆发的3D可视化

    预览图片 入门将此仓库克隆到您的系统中以获取项目文件git clone https://github.com/neomjs/covid-helix.git 打开终端内已签出的顶级文件夹cd covid-helix 安装所需的节点模块并立即运行所有相关的构建脚本npm run ...

    400个DreamWeaver插件

    mxp/通过本地http服务器直接预览页面,在File菜单下 mxp/以前的连接外部javascript文件的插件都做的一般,使用不直观,这个在object面板中加入了一个按钮,使用方便多了 mxp/使页面中的图片都恢复到原始大小,可以...

    超实用的jQuery代码段

    7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出...

    网管教程 从入门到精通软件篇.txt

    INT:中间代码,当一个源程序经过语法检查后编译产生一个可执行代码 IOF:Findit文档 IQY:Microsoft Internet查询文件 ISO:根据ISD 9660有关CD-ROM文件系统标准列出CD-ROM上的文件 ISP:X-Internet签字文件 ...

    asoft签到管理系统tykq3.5_build20110125

    10、为附件箱图片增加预览功能 11、修复登录验证码开关的小BUG 12、CSS调整,增加style文件夹,统一放置CSS 13、修改签到组弹出框样式 14、修改在线更新版本对比代码段,修正了一个无外网连接时AJAX机制报错的BUG ...

Global site tag (gtag.js) - Google Analytics