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 相关文章推荐
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
易被忽视的js事件问题总结
May 14 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 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
PHP mkdir()定义和用法
2009/01/14 PHP
php依赖注入知识点详解
2019/09/23 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python连接池实现示例程序
2013/11/26 Python
python中__call__方法示例分析
2014/10/11 Python
玩转python爬虫之正则表达式
2016/02/17 Python
Django数据库表反向生成实例解析
2018/02/06 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python生成特定分布数的实例
2019/12/05 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
初中政治教学反思
2014/01/17 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
办公室岗位职责
2014/02/12 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
会议通知格式范文
2015/04/15 职场文书
导游词之五台山
2019/10/11 职场文书