//此为不按比例显示在固定区域内(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可以读取文件对象,生成缩略图并显示在页面上,提供即时的预览效果。它还可以用于...
在开发Web应用时,经常需要实现图片预览功能,尤其是在用户上传...通过以上知识点和代码示例,可以有效解决在Firefox浏览器中通过JavaScript实现本地图片预览时所遇到的问题,使得Web应用的用户体验更加友好和完整。
2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....
2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....
解决JavaScript中图片加载出现404错误的问题,首先需要了解这个错误是如何产生的。当浏览器尝试加载图片资源,但是找不到对应的文件时,就会出现HTTP 404错误。这可能是由于文件路径错误、文件确实不存在或者服务器...
"系统随机产生一个图片名称"可能是用于演示如何生成唯一文件名的一个代码片段,而"给图片命名"可能是前端展示图片预览或处理文件名的代码。 学习这个例子,初学者可以了解文件上传的基本原理,掌握如何在前端和后端...
这包括HTML、CSS、JavaScript文件、图片以及其他任何通过HTTP或HTTPS请求获取的数据。 首先,理解计算加载字节数的过程。这通常涉及到遍历浏览器的网络日志,获取每个资源的大小。在JavaScript中,我们可以使用`...
这种技术利用CSS(层叠样式表)和JavaScript来实现当用户鼠标悬停在特定图片上时,图片产生动态的跳动效果,从而增加页面的互动性和吸引力。 描述中提到,这个特效代码是专为天猫的PC页面装修设计的,不适用于其他...
用户只需将这些文件部署到服务器,或者在本地进行预览,就能看到效果。如果想要更换背景,只需替换对应的图片文件,并可能需要调整CSS或JavaScript代码以适应新的背景。 总的来说,这个项目展示了如何结合HTML5、...
这通常需要利用HTML5的File API,通过JavaScript来实现文件的选择、预览、上传等操作,同时后台服务器也需要支持接收并处理多个文件的能力。 “进度条”是Huploadify-master 的一个重要特性,它提升了用户体验,让...
这种差异性的运动使得每个图层在视觉上产生不同的深度,从而创造出立体的视觉差效果。 **插件的使用步骤** 1. **引入jQuery库**:首先,你需要在HTML文件中引入jQuery库,通常通过CDN链接或本地文件引用。 2. **...
开发者可以通过解压并运行`index.html`或类似文件,在本地浏览器中预览ECharts的示例,从而学习和调试。同时,他们还需要了解HTML、CSS和JavaScript基础知识,以便将ECharts嵌入到自己的网页项目中。 总的来说,...
8.支持从服务器URL或本地直接插入透明浮动图片到Word,Excel文档 ; 9.支持将手工绘制的图片作为透明浮动的图片增加到Word,Excel文档 ; 10.全面支持Office2000的打印预览 11. 轻量级,只有不足50K 使用C语言直接...
这些效果包括平移、淡入淡出、旋转、缩放等,使页面中的内容能够在视觉上产生强烈的冲击力。此外,该插件还支持自定义设置,如幻灯片间隔时间、导航箭头、页码指示器等,以满足不同项目的个性化需求。 在实际应用中...
2. `.gitignore`:此文件用来指定在Git版本控制中忽略哪些文件或目录,例如编译产生的临时文件和日志文件等。 3. `.eslintrc.js`:ESLint配置文件,用于设定代码风格和质量标准,确保代码的一致性和可读性。 4. `...
在日常使用IE浏览器的过程中,为了提高网页加载速度和用户体验,浏览器会自动将部分网页内容缓存到本地,这些内容包括但不限于HTML文件、图片、JavaScript、CSS样式表以及多媒体资源。 描述中提到,“可以提取看过...
12. **透明浮动图片插入**:用户可以直接从URL或本地插入透明浮动图片到Word和Excel文档。 13. **手绘图片转换**:可以将手绘图像转化为透明浮动图片并添加到文档中。 14. **打印预览支持**:提供全面的Office2000...
8. **API接口**:允许开发者通过JavaScript API与服务器端进行交互,实现数据保存、预览等功能。 在自行修改的版本中,可能包含以下定制内容: 1. **自定义功能**:根据业务需求添加了特定的编辑功能,例如特殊...
★ 支持从服务器URL或本地直接插入透明浮动图片到Word,Excel文档 新增加的AddPicFromURL和AddPicFromLocal函数可以直接从URL或本地插入透明的浮动图片到Office文档 ★ 支持将手工绘制的图片作为透明浮动的图片增加...