为大家带来一篇input type=file 选择图片并且实现预览效果的实例。

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

accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；

multiple：规定是否可以选择多个文件；

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

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

 

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

<body>

    <style>

        #box {

            width: 300px;

            height: 300px;

            border: 2px solid #858585;

        }

        #imgshow {

            width: 100%;

            height: 100%;

        }

        #pox {

            width: 70px;

            height: 24px;

            overflow: hidden;

        }

    </style>

    <div id="box">

        <img id="imgshow" src="" alt="" />

    </div>

    <div id="pox">

        <input id="filed" type="file" accept="image/*" />

    </div>

    <script language="JavaScript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js?rand=1525249087392"></script>

    <script>

        $(document).ready(function () {

            //在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>

</body>

input type=file 选择图片并且实现预览效果的实例的更多相关文章

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

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...

  2. html input type=file 选择图片,图片预览 纯html js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  4. Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...

  5. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

  6. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  7. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  8. input[type="file"]的图片预览

    在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...

  9. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

随机推荐

  1. java 的反射机制

    一:介绍 1.大纲 #1 允许程序在执行期间,调用反射API取得任何类的内部信息,并且可以直接操作任何对象的内部属性和方法. #2 学习反射,需要掌握的知识点: *实例化class类 *获取类的完整结 ...

  2. Wireshark、Netcat

    Wireshark Wireshark是一个网络数据包分析软件,功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据.为了安全考虑,wireshark只能查看封包,而不能修改封包的内容,或者发 ...

  3. Spring-Session实现Session共享Redis集群方式配置教程

    循序渐进,由易到难,这样才更有乐趣! 概述 本篇开始继续上一篇的内容基础上进行,本篇主要介绍Spring-Session实现配置使用Redis集群,会有两种配置方式,一种是Redis-Cluster, ...

  4. java中关于锁知识的整理

    1.1什么是锁? 在计算机科学中,锁(lock)或互斥(mutex)是一种同步机制,用于在有许多执行线程的环境中强制对资源的访问限制.锁旨在强制实施互斥排他.并发控制策略. 锁通常需要硬件支持才能有效 ...

  5. 使用Plant Simulation连接SQL Server

    1. 在管理类库中添加ODBC. 2. 在控制面板->管理工具中设置ODBC,添加SQL Server服务. 3. 在plant simulation中将信息流中的ODBC添加到Frame中. ...

  6. android Service oncreate 在UI线程 何时用service，何时用thread

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 服务的生命周期 各个方法 都是在主线程中的. 这里的操作可以导致主线程阻塞. 这些方法, ...

  7. 【Go命令教程】13. go tool cgo

    cgo 也是一个 Go 语言自带的特殊工具.一般情况下,我们使用命令 go tool cgo 来运行它.这个工具可以使我们创建能够调用 C 语言代码的 Go 语言源码文件.这使得我们可以使用 Go 语 ...

  8. TIDB VS COCKROACHEB

    分布式事务 要支持分布式事务,首先要解决的就是分布式系统时间的问题,也就是我们用什么来标识不同事务的顺序.通常有几种做法: TrueTime,TrueTime 是 Google Spanner 使用的 ...

  9. 用delphi实现完美屏幕截图

    可以截取layered窗口(包括透明窗口)的代码: procedure CaptureScreen(AFileName: string);const  CAPTUREBLT = $40000000;v ...

  10. Java异常---获取异常的堆栈信息

    Java 实例 - 获取异常的堆栈信息  Java 实例 以下实例演示了使用异常类的 printStack() 方法来获取堆栈信息: Main.java 文件 public class Main{ p ...