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 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
Vue.js表单控件实践
Oct 27 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
JS轮播图的实现方法
Aug 24 Javascript
微信小程序实现简单购物车功能
Dec 30 Javascript
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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
php checkbox 取值详细说明
2010/08/19 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
vue组件父与子通信详解(一)
2017/11/07 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python实现文件复制删除
2016/04/19 Python
python sys.argv[]用法实例详解
2018/05/25 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
《中华少年》教学反思
2014/02/15 职场文书
市场开发计划书
2014/05/07 职场文书
音乐教师个人总结
2015/02/06 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
Python使用openpyxl模块处理Excel文件
2022/06/05 Python