jQuery实现的上传图片本地预览效果简单示例
更新时间：2018年03月29日 10:33:14 作者：tengxing007
这篇文章主要介绍了jQuery实现的上传图片本地预览效果,结合实例形式分析了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程序设计有所帮助。
相关文章
jQuery获取select选中的option的value值实现方法
下面小编就为大家带来一篇jQuery获取select选中的option的value值实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
jQuery Datatable 多个查询条件自定义提交事件(推荐)
这篇文章主要介绍了jQuery Datatable 多个查询条件自定义提交事件的相关资料,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了jquery.post用法之type设置问题,需要的朋友可以参考下2014-02-02
在2016年6月迎来了jquery3.0最终版，jquery3.0有哪些新特征呢？很多朋友不是很清楚，下面小编给大家带来了jQuery 3.0十大新特性，感兴趣的朋友一起看下吧2016-07-07
这篇文章主要介绍了jQuery+CSS3实现多种类型的导航条制作实例详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
下面小编就为大家带来一篇jquery获取复选框checkbox的值的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
从零开始学习jQuery (八) 插播:jQuery实施方案
本篇文章属于临时插播, 用于介绍我在本公司的jQuery实施方案.2011-02-02
align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中)2010-10-10
这篇文章主要为大家详细介绍了webuploader模态框ueditor显示问题的解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要给大家介绍了关于如何利用jqgrid实现上移下移单元格功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
最新评论