<style type="text/css">
#newPreview {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale);
width: 300px;
height: 250px;
}
</style>
function loadImage(img)
{
var urlpath=img.value;
try
{
var i=document.getElementById("img");
if(brower().isIE7)
{
i.style.display="none";
document.getElementById("newPreview").style.display=""; document.getElementById("newPreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = urlpath;
}
else if(brower().isChrome)
{
i.src="img/nopreview.jpg";
document.getElementById("filetext").value=url;
}
else
{
if(!window.event)
{
var data=img.files.item(0).getAsDataURL();
i.src='data:'+data;
}
else
{
i.src='file:///'+url;
}
}
}
catch(e){}
}
<INPUT type="file" style='border:#99cc33 1px solid;width=350px ;background:#eeeeee'
size=38 name="file1" id="f" contentEditable="false" onchange="loadImage(this);"
onKeyDown="return false;" onpaste="return false;"><SPAN id="t1"></SPAN>
<div id="showImg">
<img src="img/no_photo.gif" style='width:300px;height:250px' id="img"/>
<div id="newPreview" style="display: none;"></div><br/></div>
分享到:
相关推荐
ASP.NET 图片预览技术是Web开发中一个实用的功能,特别是在用户需要上传图片并即时查看效果的场景下。本文将详细讲解如何在ASP.NET环境中实现图片上传后的即时预览,以及考虑不同浏览器的兼容性问题。 首先,我们...
**JavaScript前端图片预览插件详解** 在网页开发中,图片预览是一个常见的需求,它允许用户在上传或查看图片前进行预览操作。本文将详细介绍一个基于JavaScript实现的前端图片预览插件,该插件利用HTML5的Canvas...
**jQuery图片预览插件详解** 在Web开发中,图片预览功能是用户交互体验的重要组成部分,尤其是在上传图片或展示图片集时。jQuery作为一个轻量级的JavaScript库,提供了丰富的插件来增强这一功能。本篇文章将深入...
在IT行业中,图片预览是一项常见且重要的功能,尤其在网页和应用程序中。它允许用户在不实际下载或打开文件的情况下查看图片内容,提升了用户体验。本文将深入探讨如何实现这一功能,包括前端和后端的技术实现。 ...
vue3 发布之后,开始使用 vue3 + ts 写代码,需要使用图片预览插件,在 npm 找了一圈没有适合的。要么是 v2 的插件,要么是不支持 ts,要么是使用不方便,因此封装一个简单的图片预览插件。 内附使用说明 纯手打,...
本教程将深入讲解如何使用jQuery实现图片预览功能。 首先,我们需要了解基本的HTML结构。在`index.html`文件中,你需要创建一个`<input>`元素用于让用户选择图片,以及一个`<div>`元素作为预览区域: ```html <!...
在这个背景下,"jQuery H5移动端图片预览插件"应运而生,它旨在解决移动端图片预览的问题,为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计,它能够无缝地集成到你的H5...
标题中的“多图片预览-左右切换查看-兼容PC、移动端”指的是一个功能完善的图片预览系统,它能够处理和展示多个图片,并且用户可以通过左右滑动或点击来进行图片之间的切换。这个系统的设计考虑到了跨平台的兼容性,...
在IT行业中,图片预览和放大功能是网页设计和用户体验中的关键部分,特别是在电商网站上,用户需要清晰地查看商品细节。"图片预览新窗口全屏图片展示功能"是这样一种技术,它允许用户点击缩略图后,在一个新的浏览器...
在IT行业中,图片预览是一项常见且重要的功能,特别是在社交应用中,如微信。"仿微信图片预览"是一个项目,旨在实现一个自定义的图片预览机制,它模仿了微信聊天界面中的图片查看方式,提供了平滑的用户体验,防止...
**标题详解:** "viewer.js图片预览插件" 是一个专门用于图片预览的JavaScript库,它提供了方便的功能,使用户能够在网页上快速、高效地预览图片。这个插件设计灵活,可以在不同的项目中独立使用,无需依赖其他大型...
### tinyMCE本地图片预览实现详解 #### 一、简介 tinyMCE是一款非常流行的开源富文本编辑器,广泛应用于各种网站和应用程序中。它提供了丰富的文本编辑功能,包括但不限于格式化文本、插入图像、链接等。在某些...
在网页开发中,图片预览和浏览功能是一个常见的需求,特别是在用户需要查看多张图片时。这个场景下,"jQuery 图片预览浏览功能"是一个关键的实现方式,它利用了JavaScript库jQuery的强大功能,提供了方便快捷的图片...
**viewer.js 图片预览插件** viewer.js 是一个轻量级且易于使用的JavaScript插件,专门用于在网页上实现图片预览功能。这个插件适用于各种设备,包括桌面和移动端,使得用户在点击图片后能够快速查看大图并进行交互...
"android 视频图片预览"这一主题,主要涵盖了以下几个关键知识点: 1. **多媒体文件管理**: 在Android中,管理和访问本地存储的图片和视频文件需要用到`MediaStore`类,它提供了访问设备上所有媒体内容的接口。...
**jQuery实现的图片预览插件(imgPreview)详解** 在Web开发中,用户在上传或浏览图片时,能够实时预览图片是一项非常重要的功能。jQuery的imgPreview插件提供了一个简单且高效的解决方案,使得开发者可以轻松地在...
在IT领域,图片预览是用户体验中不可或缺的一部分,特别是在网页设计和移动应用开发中。"图片预览源代码"提供了一种实现这一功能的方式,它支持图片切换动画,增加了交互性和视觉吸引力。以下是对这个主题的详细解释...
【图片预览插件 viewer】是一种在网页应用中实现图片快速预览功能的工具,它允许用户无需下载或打开原始大图即可查看图片内容。在网页设计和开发中,这样的插件是至关重要的,因为它提供了方便、高效且用户体验良好...
在React开发领域,图片预览和查看功能是常见的需求,特别是在构建富交互式的Web应用时。这个名为"react-这是一个用于做图片预览或者图片查看得react插件"的项目,正是为了解决这一问题而设计的。它提供了一种方便、...
在前端开发中,"input file上传图片预览"是一个常见的需求,它允许用户选择本地的图像文件,并在上传前提供预览。这个功能在许多网站和应用中都很实用,例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...