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 类型转换方法
Oct 24 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
React路由管理之React Router总结
May 10 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
微信公众号H5支付接口调用方法
Jan 10 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
Windows下的PHP5.0详解
2006/11/18 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
ThinkPHP路由详解
2015/07/27 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
python实现关键词提取的示例讲解
2018/04/28 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
公司承诺书格式
2014/05/21 职场文书
税务会计岗位职责
2015/04/02 职场文书
学校证明范文
2015/06/24 职场文书
电视新闻稿
2015/07/17 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
MySQL sql_mode的使用详解
2021/05/08 MySQL
canvas 中如何实现物体的框选
2022/08/05 Javascript