<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1, img").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide();
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
上传预览图片:<br>
<input id="f1" name="f1" type="file" /><br>
<img id="img1" width="120" height="60" src="http://www.cssrain.cn/skins/tim/logo-jq.gif">
<div id="large"></div>
<br><br><br><br><br><br>
鼠标滑过预览图片:<br>
<img width="120" height="60" src="http://www.cssrain.cn/skins/tim/logo-jq.gif"><br>
<img width="120" height="60" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif"><br>
</body>
</html>
资源来自:
http://www.cssrain.cn/article.asp?id=538
分享到：
相关推荐
**jQuery文档预览功能插件详解** 在网页开发中，为用户提供便捷的文档预览功能是提高用户体验的重要一环。jQuery作为一个广泛使用的JavaScript库，提供了许多便利的插件来简化这种功能的实现。本篇文章将深入讲解...
**jQuery图片预览插件详解** 在Web开发中，图片预览功能是用户交互体验的重要组成部分，尤其是在上传图片或展示图片集时。jQuery作为一个轻量级的JavaScript库，提供了丰富的插件来增强这一功能。本篇文章将深入...
本文将深入探讨如何使用jQuery实现PDF在线预览功能，这在许多Web应用中都是一种常见且实用的需求。 首先，我们需要理解PDF在线预览的基本原理。PDF（Portable Document Format）是一种通用的文件格式，用于保存文档...
### jQuery实现上传图片预览 在现代Web开发中，用户交互体验是提升网站吸引力的关键因素之一。其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以...
本篇文章将详细讲解如何利用jQuery实现图片预览功能，这在网页设计中是非常常见且实用的功能，特别是对于上传图片或者展示大图时，能为用户提供更好的用户体验。 首先，我们要理解图片预览的基本原理。当用户点击...
本教程将深入讲解如何使用jQuery实现图片预览功能。 首先，我们需要了解基本的HTML结构。在`index.html`文件中，你需要创建一个`<input>`元素用于让用户选择图片，以及一个`<div>`元素作为预览区域： ```html <!...
"C# jQuery AJAX 预览并无刷新上传图片"的主题涵盖了多项技术，旨在提供流畅、直观的用户体验。以下是对这些知识点的详细阐述： 1. **jQuery**：jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、...
本文将深入探讨“jQuery上传图片预览插件”，这是一个实用的工具，旨在提升用户在网页上上传图片时的体验。该插件在浏览器中提供了图片的实时预览功能，尤其在处理图片大小调整和等比例缩放方面表现卓越，同时兼容...
本文将详细讲解如何使用jQuery实现一个支持预览多个文件和多张图片批量上传的插件。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在批量上传图片的场景中...
标题“Jquery实现预览效果”指的是使用jQuery来实现在用户选择图片文件后立即显示预览图的功能。这个功能在许多网站中都很常见，比如在线图像编辑工具或上传照片的应用。以下将详细讲解如何使用jQuery来实现这一功能...
"jquery图片预览插件.zip"正是为了解决这个问题而设计的，它是一个专为H5移动端打造的jQuery插件，允许用户在手机上轻松预览和操作图片。 该插件的核心特性包括： 1. **多图识别切换**：此插件能够识别并处理多个...
本文将深入探讨“jQuery上传图片预览”这一主题，这在Web开发中是一个常见且实用的功能，特别是在用户需要在提交之前查看上传图片效果的场景。 首先，我们需要了解jQuery中的`<input type="file">`元素。这个HTML...
在网页开发中，图片预览功能是不可或缺的一部分，尤其是在用户上传图片或浏览图片库时。一个优秀的图片预览插件能够提供流畅的用户体验，增强网站的交互性。本篇文章将深入探讨如何利用jQuery实现图片预览功能，并...
在本文中，我们将深入探讨如何利用jQuery实现一个图片上传预览功能，这是一个用户友好的特性，尤其在处理图像上传时，能够提供即时的反馈，提升用户体验。 首先，我们需要理解jQuery的核心概念。jQuery通过一种简洁...
2. **图片预览**：预览功能通常涉及到在用户选择或上传图片后，即时显示图片的小缩略图。这可以通过创建一个隐藏的图片容器，然后将待显示的图片源设置为该容器的`src`属性来实现。当图片加载完成后，可以将其显示...
jquery 上传图片前预览，就只是一个JS文件，使用也简单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head > 图片...
《jQuery Media：实现PDF在线预览的利器》 在当今互联网技术日新月异的时代，用户对于网页体验的要求越来越高，其中在线预览PDF文件成为了一项重要的功能需求。jQuery Media插件应运而生，它专门针对PDF文件的在线...
当涉及到“jQuery打印预览”时，我们通常指的是使用jQuery来实现一种用户友好的方式，允许用户在正式打印前查看页面的预览。这在很多场景下都非常有用，比如在确认报告、发票或表格的格式正确无误后再进行打印。 ...
【jQuery带预览可拖拽文件上传代码】是一款基于JavaScript库jQuery实现的高效、便捷的文件上传解决方案。它充分利用了HTML5的新特性，如FormData对象和拖放API，为用户提供了一种直观且友好的文件上传体验。这个功能...