input type=file 选择图片并且实现预览效果的实例


Posted in Javascript onOctober 26, 2017

通过<input />标签,给它指定type类型为file,可提供文件上传;

accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*;

multiple:规定是否可以选择多个文件;

规定只可上传图片,且可以选择多个文件

<input type="file" accept="image/*" multiple="multiple"/>

当然,直接一个input type=file 只能选择上传的文件/资源,如果我们需要在选择图片之后,在当前页面实现预览效果,那么我们可以如下方式来实现

HTML代码

<body>
  <div id="box">
    <img id="imgshow" src="" alt=""/>
  </div>
  <div id="pox">
    <input id="filed" type="file" accept="image/*"/>
  </div>
</body>

css样式文件

<style>
    #box{
      width: 300px;
      height: 300px;
      border: 2px solid #858585;
    }
    #imgshow{
      width: 100%;
      height: 100%;
    }
    #pox{
      width: 70px;
      height: 24px;
      overflow: hidden;
    }
  </style>

JS代码

<script>
    //在input file内容改变的时候触发事件
    $('#filed').change(function(){
    //获取input file的files文件数组;
    //$('#filed')获取的是jQuery对象,.get(0)转为原生对象;
    //这边默认只能选一个,但是存放形式仍然是数组,所以取第一个元素使用[0];
      var file = $('#filed').get(0).files[0];
    //创建用来读取此文件的对象
      var reader = new FileReader();
    //使用该对象读取file文件
      reader.readAsDataURL(file);
    //读取文件成功后执行的方法函数
      reader.onload=function(e){
    //读取成功后返回的一个参数e,整个的一个进度事件
        console.log(e);
    //选择所要显示图片的img,要赋值给img的src就是e中target下result里面
    //的base64编码格式的地址
        $('#imgshow').get(0).src = e.target.result;
      }
    })
</script>

*以上js代码中有使用到jQuery,因此要引入jQuery文件

这篇input type=file 选择图片并且实现预览效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
js 只比较时间大小的实例
Oct 26 #Javascript
基于Require.js使用方法(总结)
Oct 26 #Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 #Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 #Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 #Javascript
js插件实现图片滑动验证码
Sep 29 #Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP生成条形图的方法
2014/12/10 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
vue实现分页加载效果
2019/12/24 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python sort、sorted高级排序技巧
2014/11/21 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python多线程并发及测试框架案例
2019/10/15 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
社区健康教育工作方案
2014/06/03 职场文书
考博导师推荐信范文
2015/03/27 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
java开发双人五子棋游戏
2022/05/06 Java/Android