`
yw404109794
  • 浏览: 4381 次
  • 性别: 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'>"
        }
}


分享到:
评论

相关推荐

    图片上传及预览+时间水印

    其次,图片预览是用户在上传图片前能在界面上看到即将上传图片的效果,这增强了用户体验,减少了因上传错误图片而产生的额外操作。预览通常是在前端完成的,通过FileReader API读取图片数据,然后使用`DataURL`显示...

    图片上传控件(带预览功能)

    2. **JavaScript**:作为客户端脚本语言,JavaScript在这里主要负责用户界面的交互和图片预览功能。当用户选择图片后,JavaScript可以读取文件对象,生成缩略图并显示在页面上,提供即时的预览效果。它还可以用于...

    javascript 火狐(firefox)不显示本地图片问题解决

    在开发Web应用时,经常需要实现图片预览功能,尤其是在用户上传...通过以上知识点和代码示例,可以有效解决在Firefox浏览器中通过JavaScript实现本地图片预览时所遇到的问题,使得Web应用的用户体验更加友好和完整。

    精通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....

    解决js图片加载时出现404的问题

    解决JavaScript中图片加载出现404错误的问题,首先需要了解这个错误是如何产生的。当浏览器尝试加载图片资源,但是找不到对应的文件时,就会出现HTTP 404错误。这可能是由于文件路径错误、文件确实不存在或者服务器...

    上传图片例子(适合初学朋友)

    "系统随机产生一个图片名称"可能是用于演示如何生成唯一文件名的一个代码片段,而"给图片命名"可能是前端展示图片预览或处理文件名的代码。 学习这个例子,初学者可以了解文件上传的基本原理,掌握如何在前端和后端...

    psiResults:使用 javascript 创建的公式来计算加载网站所需的字节数并在 localizedRuleNames 中查找结果

    这包括HTML、CSS、JavaScript文件、图片以及其他任何通过HTTP或HTTPS请求获取的数据。 首先,理解计算加载字节数的过程。这通常涉及到遍历浏览器的网络日志,获取每个资源的大小。在JavaScript中,我们可以使用`...

    天猫PC页面店铺装修鼠标经过图层跳动代码特效

    这种技术利用CSS(层叠样式表)和JavaScript来实现当用户鼠标悬停在特定图片上时,图片产生动态的跳动效果,从而增加页面的互动性和吸引力。 描述中提到,这个特效代码是专为天猫的PC页面装修设计的,不适用于其他...

    基于HTML和easyUI的动态背景登录页

    用户只需将这些文件部署到服务器,或者在本地进行预览,就能看到效果。如果想要更换背景,只需替换对应的图片文件,并可能需要调整CSS或JavaScript代码以适应新的背景。 总的来说,这个项目展示了如何结合HTML5、...

    Huploadify-master 上传文件

    这通常需要利用HTML5的File API,通过JavaScript来实现文件的选择、预览、上传等操作,同时后台服务器也需要支持接收并处理多个文件的能力。 “进度条”是Huploadify-master 的一个重要特性,它提升了用户体验,让...

    可以和鼠标互动的多背景层jQuery视觉差插件

    这种差异性的运动使得每个图层在视觉上产生不同的深度,从而创造出立体的视觉差效果。 **插件的使用步骤** 1. **引入jQuery库**:首先,你需要在HTML文件中引入jQuery库,通常通过CDN链接或本地文件引用。 2. **...

    echarts-2.2.7

    开发者可以通过解压并运行`index.html`或类似文件,在本地浏览器中预览ECharts的示例,从而学习和调试。同时,他们还需要了解HTML、CSS和JavaScript基础知识,以便将ECharts嵌入到自己的网页项目中。 总的来说,...

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

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

    wowslider----超级炫酷的幻灯片插件

    这些效果包括平移、淡入淡出、旋转、缩放等,使页面中的内容能够在视觉上产生强烈的冲击力。此外,该插件还支持自定义设置,如幻灯片间隔时间、导航箭头、页码指示器等,以满足不同项目的个性化需求。 在实际应用中...

    基于vue+ts的数学口算功能项目的实现

    2. `.gitignore`:此文件用来指定在Git版本控制中忽略哪些文件或目录,例如编译产生的临时文件和日志文件等。 3. `.eslintrc.js`:ESLint配置文件,用于设定代码风格和质量标准,确保代码的一致性和可读性。 4. `...

    简单实用的IE缓存提取工具

    在日常使用IE浏览器的过程中,为了提高网页加载速度和用户体验,浏览器会自动将部分网页内容缓存到本地,这些内容包括但不限于HTML文件、图片、JavaScript、CSS样式表以及多媒体资源。 描述中提到,“可以提取看过...

    WebOffice技术开发白皮书

    12. **透明浮动图片插入**:用户可以直接从URL或本地插入透明浮动图片到Word和Excel文档。 13. **手绘图片转换**:可以将手绘图像转化为透明浮动图片并添加到文档中。 14. **打印预览支持**:提供全面的Office2000...

    ewebeditor7.0

    8. **API接口**:允许开发者通过JavaScript API与服务器端进行交互,实现数据保存、预览等功能。 在自行修改的版本中,可能包含以下定制内容: 1. **自定义功能**:根据业务需求添加了特定的编辑功能,例如特殊...

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

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

Global site tag (gtag.js) - Google Analytics