当然,直接一个input type=file 只能" />
当前位置:首页 > 日记 > 正文

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

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

通过<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 选择图片并且实现预览效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

关于Ajax中通过response在后台传递

关于Ajax中通过response在后台传递

传递数据,后台,电脑软件,Ajax,response,这是js代码:var System = { getHttpRequest: function(url, callback, options) { if (url.length < 0) return; var option = { url: url, type: "get", dataType: "…

JS继承与闭包及JS实现继承的三种方

JS继承与闭包及JS实现继承的三种方

继承,闭包,三种,方式,电脑软件,前 言在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 、 成员属性、静态属性、原型属性与JS原型链)。今天我们来继续探讨剩余的内容吧。我们都知道,面向对象的…

Vue中定义全局变量与常量的各种方

Vue中定义全局变量与常量的各种方

全局变量,常量,详解,定义,方式,前言本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都…

wps表格怎么使用函数wps表格的函数

wps表格怎么使用函数wps表格的函数

函数,使用教程,表格,电脑软件,wps,  由于函数采用模块化的设计,可以完成一定的功能,因此在WPS表格中具有广泛的应用。今天小编与各位新手一起分享一下WPS表格中函数的使用方法。希望对你有帮助!wps表格的函数使用教程选中要输入公式的单元格…

js es6系列教程 - 基于new.target

js es6系列教程 - 基于new.target

教程,语法,属性,系列,电脑软件,es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性function Person( uN…

PS合成非常高端的三维教堂PARTY海

PS合成非常高端的三维教堂PARTY海

教堂,海报,电脑软件,PS,PARTY,这篇教程教的PS图片合成学习者们使用PS合成高大上教堂PARTY海报,教程制作出来的海报非常漂亮,非常高端,乍一看很多人会以为是使用三维软件制作的,其实并不是,这都是通过PS找素材和合成的,推荐一下,喜欢的就给我好评啦…

ionic+AngularJs实现获取验证码倒

ionic+AngularJs实现获取验证码倒

验证码,倒计时,按钮,电脑软件,ionic,按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中。设置一个$timeout,60秒…

详解react如何在组件中获取路由参

详解react如何在组件中获取路由参

路由,参数,组件,详解,如何在,路由参数假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢?这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置。import List from './compo…

Word2013如何设置打印方向为横向Wo

Word2013如何设置打印方向为横向Wo

横向,方法,设置,如何设置,电脑软件,  要使用Word打印文件,打印的一般是纵向,但有时候需要横向的打印方式,这需要怎么才做呢?下面小编来告诉你怎么将Word2013设置打印方向为横向吧。希望对你有帮助!Word2013设置打印方向为横向的方法打开需要…

动态统计当前输入内容的字节、字符

动态统计当前输入内容的字节、字符

字符,输入,动态,统计,字节,动态统计当前输入内容的字节、字符数的实例详解看到网上有好多利用charAt方法,原理也很简单,用正则判断是不是中文,如果是的话,字节数就加2,不是的话,字节数就加1。后来发现另一种方式,由于一个汉字对应是两个字节,可利用…

PPT2007幻灯片如何转换成网页进行

PPT2007幻灯片如何转换成网页进行

浏览,网页,幻灯片,转换成,电脑软件,  在播放幻灯片的时候都希望将其保存为演示文稿的形式进行播放,在ppt2007 中制作的幻灯片可以转换成网页进行网页式的浏览。以下是小编为您带来的关于PPT2007幻灯片转换成网页进行浏览,希望对您有所帮助…

关于JavaScript的单双引号嵌套问题

关于JavaScript的单双引号嵌套问题

嵌套,双引号,电脑软件,JavaScript,单引号和双引号之间可以相互嵌套。1、单引号内只能嵌套双引号。2、双引号内只能嵌套单引号。3、如果想在双引号内,再嵌套双引号,里面的双引号,一定要进行转义(\”)。4、JS中的转义字符是反斜杠(\).常用的转义…