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高级程序设计
Dec 29 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
js评分组件使用详解
Jun 06 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue实现学生信息管理系统
May 30 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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实现获取近几日、月时间示例
2019/07/06 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
javascript Excel操作知识点
2009/04/24 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
如何运行带参数的python脚本
2019/11/15 Python
Python如何计算语句执行时间
2019/11/22 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
记者岗位职责
2014/01/06 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
境外导游求职信
2014/02/27 职场文书
模具专业自荐信
2014/05/29 职场文书
新闻发布会策划方案
2014/06/12 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
质检员岗位职责范本
2015/04/07 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android