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 相关文章推荐
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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实现网站插件机制的方法
2009/11/10 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
区分python中的进程与线程
2020/08/13 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
C语言面试题
2013/05/19 面试题
静态变量和实例变量的区别
2015/07/07 面试题
致长跑运动员广播稿
2014/01/31 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android