jQuery实现的上传图片本地预览效果简单示例

本文实例讲述了jQuery实现的上传图片本地预览效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jquery上传图片本地预览效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
  // 获取FileList的第一个元素
  alert(document.getElementById('upload').files[0]);
  var f = document.getElementById('upload').files[0];
  src = window.URL.createObjectURL(f);
  document.getElementById('preview').src = src
})
</script>
</body>
</html>

运行效果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery实现图片上传前本地预览功能

    jquery实现图片上传前本地预览功能

    本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

  • 基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）

    本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下 1.关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现. $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(

  • 基于jQuery的图片大小自动适应实现代码

    关于 这个和以前弄的图片远处放大有许多相同的地方,比如图片预加载.有限容器显示无限大图片. 大小计算:内外两个比例. 复制代码 代码如下: // 容器比例和图片比例 var dr = dw/dh, ir = iw/ih; if(dr>ir){ ih = dh; iw = ih * ir; }else{ iw = dw; ih = iw / ir; } 居中显示:CSS绝对定位,负边距. 复制代码 代码如下: $img.css({width:iw,height:ih,position:'absol

  • 使用jquery获取网页中图片高度的两种方法

    使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 复制代码 代码如下: $("img").whith();(返回纯数字) $("img").css("width");(返回字符串:数字+"px") 但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异 方法一 在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的<img>标签上

  • JQuery Jcrop 实现图片裁剪的插件

    JQuery Jcrop 实现图片裁剪的插件

    效果如下图请"运行代码"先试下运行,运行后请刷新一次,感受下: body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') t

  • jquery预览图片实现鼠标放上去显示实际大小

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery获取file控件中图片的宽高与大小

    问题 如何判断input file表单里上传的图片的宽高和大小呢? 解决方案 这个时候图片还没真正上传,也不是在页面上展示,不能使用$("#id").width(),$("#id").height()这种方式. 在Stack Overflow找到一个方法获取input file图片文件的宽高: var _URL = window.URL || window.webkitURL; $("#file").change(function (e) { v

  • 基于Jquery的简单图片切换效果

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascrip

  • 简单实现jQuery上传图片显示预览功能

    本文实例为大家分享了jQuery上传图片显示预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img

  • 使用jQuery实现验证上传图片的格式与大小

    代码很简单,常见的图片格式均已加入验证之中,小伙伴们可以直接拿去用的. 废话少说,直接上代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xht

  • jQuery实现判断上传图片类型和大小的方法示例

    本文实例讲述了jQuery实现判断上传图片类型和大小的方法.分享给大家供大家参考,具体如下: 这里使用jQuery判断上传图片的类型和大小: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="" method=""> <input type=&q

随机推荐