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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
PHP PDO操作总结
2014/11/17 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python静态方法实例
2015/01/14 Python
Python中的pprint折腾记
2015/01/21 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Pytorch转tflite方式
2020/05/25 Python
优秀员工自荐信范文
2013/10/05 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
趣味运动会活动方案
2014/02/12 职场文书
干部鉴定材料
2014/05/18 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
小学中队活动总结
2015/05/11 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL