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 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
微信小程序登录session的使用
Mar 17 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
基于vue中的scoped坑点解说
Sep 04 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
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python @property使用方法解析
2019/09/17 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python识别验证码的思路及解决方案
2020/09/13 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
性能测试工程师的面试题
2015/02/20 面试题
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
职工趣味运动会方案
2014/02/10 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
民主生活会意见
2015/06/05 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
七年级作文之雪景
2019/11/18 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang