JQ图片文件上传之前预览功能的简单实例(分享)


Posted in Javascript onNovember 12, 2017

1、先准备一个div

onchange触发事件

<input type="file" onchange="preview(this)" ></span>
<div id="preview"></div>

2、写JS代码

//上传图片之前预览图片
function preview(file){
if (file.files && file.files[0]){ 
var reader = new FileReader(); 
reader.onload = function(evt){ 
$("#preview").html('<img src="' + evt.target.result + '" width="95px" height="50px" />'); 
} 
reader.readAsDataURL(file.files[0]); 
}else{
$("#preview").html('<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>'); 
} 
}

以上这篇JQ图片文件上传之前预览功能的简单实例(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
jQuery 创建Dom元素
May 07 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jQuery插件的写法分享
Jun 12 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
JS实现小球的弹性碰撞效果
Nov 11 #Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 #Javascript
JS Input里添加小图标的两种方法
Nov 11 #Javascript
fetch 使用及如何接收JS传值
Nov 11 #Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 #Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 #Javascript
You might like
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
jquery选择器使用详解
2014/04/08 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
vue和webpack安装命令详解
2018/06/15 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
python分割文件的常用方法
2014/11/01 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
对Python函数设计规范详解
2019/07/19 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
用 Python 制作地球仪的方法
2020/04/24 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
实习生自我鉴定
2013/12/12 职场文书
办理信用卡工作证明
2014/01/11 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
公司文体活动总结
2015/05/07 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
python使用shell脚本创建kafka连接器
2022/04/29 Python