input type=file 选择图片并且实现预览效果详解-js教程-PHP中文网

首页

web前端

js教程

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

小云云

Jan 02, 2018 pm 04:00 PM

file input type

本文主要为大家带来一篇input type=file 选择图片并且实现预览效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

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

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

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

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

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

登录后复制

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

HTML代码

<body>
  <p id="box">
    <img id="imgshow" src="" alt=""/>
  </p>
  <p id="pox">
    <input id="filed" type="file" accept="image/*"/>
  </p>
</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文件

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7480

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

鸿蒙原生应用随机诗词 Feb 19, 2024 pm 01:36 PM

想了解更多关于开源的内容，请访问：51CTO鸿蒙开发者社区https://ost.51cto.com运行环境DAYU200:4.0.10.16SDK：4.0.10.15IDE：4.0.600一、创建应用点击File->newFile->CreateProgect。选择模版：【OpenHarmony】EmptyAbility：填写项目名，shici，应用包名com.nut.shici,应用存储位置XXX（不要有中文，特殊字符，空格）。CompileSDK10，Model：Stage。Device

使用java的File.length()函数获取文件的大小 Jul 24, 2023 am 08:36 AM

使用Java的File.length()函数获取文件的大小文件大小是在处理文件操作时很常见的一个需求，Java提供了一个很方便的方法来获取文件的大小，即使用File类的length()方法。本文将介绍如何使用该方法来获取文件的大小，并给出相应的代码示例。首先，我们需要创建一个File对象来表示我们想要获取大小的文件。以下是创建File对象的方法：Filef

php blob怎么转file Mar 16, 2023 am 10:47 AM

php blob转file的方法：1、创建一个php示例文件；2、通过“function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' })}”方法实现Blob转File即可。

使用java的File.renameTo()函数重命名文件 Jul 25, 2023 pm 03:45 PM

使用Java的File.renameTo()函数重命名文件在Java编程中，我们经常需要对文件进行重命名的操作。Java提供了File类来处理文件操作，其中的renameTo()函数可以方便地重命名文件。本文将介绍如何使用Java的File.renameTo()函数来重命名文件，并提供相应的代码示例。File.renameTo()函数是File类的一个方法，

Go中Type关键字有哪些用法 Sep 06, 2023 am 09:58 AM

Go中Type关键字的用法有定义新的类型别名或者创建新的结构体类型。详细介绍：1、类型别名，使用“type”关键字可以为已有的类型创建别名，这种别名不会创建新的类型，只是为已有的类型提供一个新的名称，类型别名可以提高代码的可读性，使代码更加清晰；2、结构体类型，使用“type”关键字可以创建新的结构体类型，结构体是一种复合类型，可以用于定义包含多个字段的自定义类型等等。

解决Ubuntu挂载移动硬盘错误：未知的文件系统类型exfat Jan 05, 2024 pm 01:18 PM

ubuntu挂载移动硬盘出现错误：mount:unknownfilesystemtype'exfat'处理方法如下：Ubuntu13.10或安装exfat-fuse:sudoapt-getinstallexfat-fuseUbuntu13.04或以下sudoapt-add-repositoryppa:relan/exfatsudoapt-getupdatesudoapt-getinstallfuse-exfatCentOSLinux挂载exfat格式u盘错误的解决方法CentOS中加载extfa

vue3怎么封装input组件和统一表单数据 May 12, 2023 pm 03:58 PM

准备工作用vuecreateexample创建项目，参数大概如下：用原生input原生的input，主要是value和change，数据在change的时候需要同步。App.tsx如下：import{ref}from'vue';exportdefault{setup(){//username就是数据constusername=ref('张三');//输入框变化的时候，同步数据constonInput=;return()=>({

使用java的File.getParent()函数获取文件的父路径 Jul 24, 2023 pm 01:40 PM

使用java的File.getParent()函数获取文件的父路径在Java编程中，我们经常需要操作文件和文件夹。有时候，我们需要获取一个文件的父路径，也就是该文件所在文件夹的路径。Java的File类提供了getParent()方法用于获取文件或文件夹的父路径。File类是Java对文件和文件夹的抽象表示，它提供了一系列操作文件和文件夹的方法。其中，get

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题