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限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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
PHP编程函数安全篇
2013/01/08 PHP
纯php生成随机密码
2015/10/30 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
php异常处理捕获错误整理
2019/09/23 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
pytorch中index_select()的用法详解
2021/01/06 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
土建工程师岗位职责
2014/06/10 职场文书
2014年民警工作总结
2014/11/25 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL