input file上传 图片预览功能实例代码


Posted in Javascript onOctober 25, 2016

input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了。

具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" multiple id="inputs"/> //multiple(多文件上传)
<div id='dd'></div>
<script>
$(document).ready(function () {
$("#inputs").change(function () {
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
});
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML += "<img src='"+reader.result+"'>";
};
}
</script>
</body>
<html>

实现上传图片直接预览,避免提交后在读取图片的冗余过程

以上所述是小编给大家介绍的input file上传 图片预览功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
Node.js开启Https的实践详解
Oct 25 #Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 #Javascript
利用yarn实现一个webpack+react种子
Oct 25 #Javascript
Yarn的安装与使用详细介绍
Oct 25 #Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 #Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 #Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 #Javascript
You might like
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
理解JavaScript原型链
2016/10/25 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python堆排序原理与实现方法详解
2018/05/11 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Django中的session用法详解
2020/03/09 Python
Python能做什么
2020/06/02 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
大学校园活动策划书
2014/02/04 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
新闻编辑求职信
2014/07/13 职场文书
招商银行工作证明
2015/06/17 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL