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 相关文章推荐
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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中检查文件或目录是否存在的代码小结
2012/10/22 PHP
php二维数组转成字符串示例
2014/02/17 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
js返回顶部实例分享
2016/12/21 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python常见数据结构详解
2014/07/24 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
详解python中asyncio模块
2018/03/03 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
打架检讨书800字
2014/01/10 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
先进党员事迹材料
2014/12/24 职场文书
三八妇女节慰问信
2015/02/14 职场文书
高三英语教学反思
2016/03/03 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python