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 常用方法总结
Jun 03 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
AngularJS实现多级下拉框
Mar 25 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
用javascript操作xml
2006/11/04 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
英文导游欢迎词
2014/01/11 职场文书
5.1手机促销活动
2014/01/17 职场文书
员工入职担保书范文
2014/04/01 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
地震慰问信
2015/02/14 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书