jq实现上传头像并实时预览功能
时间:2022-05-04
本文章向大家介绍jq实现上传头像并实时预览功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果
页面结构
<form action="" name="form0" id="form0">
<input type="file" name="pic" id="pic" class="file0"/>
<a href="">选择图像</a>
<span id="info"></span>
<img src="" alt="" id="img0" width="100" />
</form>
JS代码
$(function(){
$("#pic").change(function(){
if($.browser.msie){
$("#img0").attr("src",$(this).val())
$("#info").text("当前选择的文件:"+$(this).val())
}else{
$("#info").text("当前选择的文件:"+$(this).val())
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$("#img0").attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) {
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) {
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) {
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
})
需要注意的是如果使用jQuery 1.9及以上版本移除了$.browser可以使用$.support来替代
- JavaScript 之 this 详解
- Golang 中 for-loop 和 goroutine 的问题
- 【学术】一文教你如何正确利用kNN进行机器学习
- 【学术】机器学习优化函数的直观介绍
- 基于达尔文进化论的遗传算法,还能帮你破解同事的密码?| 附代码
- Vue + Node + Mongodb 开发一个完整博客流程
- Golang中用interface{}接收任何参数与强转
- Machine Box创始人教你快速建立一个ML图像分类器
- 【图解】Web前端实现类似Excel的电子表格
- 一个简单而强大的深度学习库—PyTorch
- CSS实现水平|垂直居中漫谈
- 深度学习开源框架PaddlePaddle发布新版API,简化深度学习编程
- HTML5游戏引擎深度测评
- 使用NumPy介绍期望值,方差和协方差
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 数据库PostrageSQL-服务器配置(复制)
- 高可用服务解决方案(DBA).md
- dotnet 使用 Interlocked 实现一个无锁的快速无序仅写集合
- 利用Python将gff3转换成gtf格式
- 单细胞DoHeatmap画热图标签出界
- FastSpar | 用更快的 SparCC 进行微生物组相关性分析
- GO和KEGG富集倍数(Fold Enrichment)如何计算
- 监控域名HTTPS证书过期时间
- 使用hmmlearn分析股票数据
- Flink源码阅读之Checkpoint执行过程
- 一文了解Kudu的核心原理
- 回归问题的中的常用方法
- 深度优先搜索(DFS)两点之间的可行路径
- docker相关工具
- Dijkstra算法求图中最短路径