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


Posted in Javascript onMay 10, 2016

本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下
介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用。直接上代码。

html部分:

<img id="pic" src="" >

<input id="upload" name="file" accept="image/*" type="file" style="display: none"/>

input:file事件是上传类型
较常用的属性值如下:
accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。
若要支持所有图片格式,则写 * 即可。
multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径

input:file的样式是不变的,所以若要改变它的样式,首先将它隐藏。display:none;

CSS部分:
因为做的是一个圆形的头像,所以对图片样式先进行定义。

#pic{
 width:100px;
 height:100px;
 border-radius:50% ;
 margin:20px auto;
 cursor: pointer;
 }

jQuery部分:

$(function() {
 $("#pic").click(function () {
 $("#upload").click(); //隐藏了input:file样式后,点击头像就可以本地上传
 $("#upload").on("change",function(){
 var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径,该路径不是图片在本地的路径
 if (objUrl) {
 $("#pic").attr("src", objUrl) ; //将图片路径存入src中,显示出图片
 }
 });
 });
 });

 //建立一??可存取到?file的url
 function getObjectURL(file) {
 var url = null ;
 if (window.createObjectURL!=undefined) { // basic
 url = window.createObjectURL(file) ;
 } else if (window.URL!=undefined) { // mozilla(firefox)
 url = window.URL.createObjectURL(file) ;
 } else if (window.webkitURL!=undefined) { // webkit or chrome
 url = window.webkitURL.createObjectURL(file) ;
 }
 return url ;
 }

运行结果如下:

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

更多精彩内容,请点击《jQuery上传操作汇总》,《ajax上传技术汇总》进行深入学习和研究。

以上就是本文的全部内容,希望对大家学习jquery程序有所帮助。

Javascript 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
vue-axios使用详解
May 10 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 #Javascript
基于jquery实现三级下拉菜单
May 10 #Javascript
jQuery Dialog对话框事件用法实例分析
May 10 #Javascript
bootstrap网页框架的使用方法
May 10 #Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 #Javascript
jQuery的文档处理程序详解
May 10 #Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python实现八皇后问题示例代码
2018/12/09 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
一行python实现树形结构的方法
2019/08/09 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
python实现发送邮件
2021/03/02 Python
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
关于安全的演讲稿
2014/05/09 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
企业法律事务工作总结
2015/08/11 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
php TP5框架生成二维码链接
2021/04/01 PHP
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python