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 相关文章推荐
jQuery Tools tooltip使用说明
Jul 14 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
javascript的理解及经典案例分析
May 20 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
js实现录音上传功能
Nov 22 Javascript
Vue实现购物车实例代码两则
May 30 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
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php自定义hash函数实例
2015/05/05 PHP
PHP实现简易计算器功能
2020/08/28 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
pandas实现导出数据的四种方式
2020/12/13 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
土木建筑学生自我评价
2014/01/14 职场文书
留学经费担保书
2014/05/12 职场文书
公司担保书范文
2014/05/21 职场文书
煤矿安全协议书
2014/08/20 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
入党培养人考察意见
2015/06/08 职场文书
幼儿园六一主持词
2015/06/30 职场文书
运动会5000米加油稿
2015/07/21 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL