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帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python的print用法示例
2014/02/11 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
深入浅析Python代码规范性检测
2020/07/31 Python
python实现移动木板小游戏
2020/10/09 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
应用数学自荐书范文
2013/11/24 职场文书
物流合作计划书
2014/01/10 职场文书
老兵退伍感言
2015/08/03 职场文书
Python List remove()实例用法详解
2021/08/02 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python