Home Web Front-end JS Tutorial Detailed explanation of input type=file to select pictures and achieve preview effects

Detailed explanation of input type=file to select pictures and achieve preview effects

Jan 02, 2018 pm 04:00 PM
file input type

This article mainly brings you an example of selecting images with input type=file and achieving preview effects. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Through the tag, specify the type as file, which can provide file upload;

accept: You can choose the upload type, such as: just upload pictures, and there are no restrictions The image format is image/*;

multiple: specifies whether multiple files can be selected;

specifies that only pictures can be uploaded, and multiple files can be selected

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

Of course , a direct input type=file can only select uploaded files/resources. If we need to achieve the preview effect on the current page after selecting the image, then we can achieve it in the following way

HTML code

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

css style file

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

JS code

<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>
Copy after login

*JQuery is used in the above js code, so the jQuery file must be introduced

Related recommendations:

File Control Select Picture Example Tutorial

HTML5 Plus Example Code for Implementing the Function of Taking Photos or Album Selecting Pictures to Upload in Mobile APP

The input image will not be uploaded and displayed in time after selecting it

The above is the detailed content of Detailed explanation of input type=file to select pictures and achieve preview effects. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1654
14
PHP Tutorial
1252
29
C# Tutorial
1225
24
How to convert php blob to file How to convert php blob to file Mar 16, 2023 am 10:47 AM

How to convert php blob to file: 1. Create a php sample file; 2. Through "function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' })} ” method can be used to convert Blob to File.

Use java's File.length() function to get the size of the file Use java's File.length() function to get the size of the file Jul 24, 2023 am 08:36 AM

Use Java's File.length() function to get the size of a file. File size is a very common requirement when dealing with file operations. Java provides a very convenient way to get the size of a file, that is, using the length() method of the File class. . This article will introduce how to use this method to get the size of a file and give corresponding code examples. First, we need to create a File object to represent the file we want to get the size of. Here is how to create a File object: Filef

Hongmeng native application random poetry Hongmeng native application random poetry Feb 19, 2024 pm 01:36 PM

To learn more about open source, please visit: 51CTO Hongmeng Developer Community https://ost.51cto.com Running environment DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. To create an application, click File- >newFile->CreateProgect. Select template: [OpenHarmony] EmptyAbility: Fill in the project name, shici, application package name com.nut.shici, and application storage location XXX (no Chinese, special characters, or spaces). CompileSDK10, Model: Stage. Device

Rename files using java's File.renameTo() function Rename files using java's File.renameTo() function Jul 25, 2023 pm 03:45 PM

Use Java's File.renameTo() function to rename files. In Java programming, we often need to rename files. Java provides the File class to handle file operations, and its renameTo() function can easily rename files. This article will introduce how to use Java's File.renameTo() function to rename files and provide corresponding code examples. The File.renameTo() function is a method of the File class.

Use java's File.getParent() function to get the parent path of the file Use java's File.getParent() function to get the parent path of the file Jul 24, 2023 pm 01:40 PM

Use java's File.getParent() function to get the parent path of a file. In Java programming, we often need to operate files and folders. Sometimes, we need to get the parent path of a file, which is the path of the folder where the file is located. Java's File class provides the getParent() method to obtain the parent path of a file or folder. The File class is Java's abstract representation of files and folders. It provides a series of methods for operating files and folders. Among them, get

Solve Ubuntu mounting mobile hard disk error: unknown file system type exfat Solve Ubuntu mounting mobile hard disk error: unknown file system type exfat Jan 05, 2024 pm 01:18 PM

An error occurs when ubuntu mounts a mobile hard disk: mount: unknownfilesystemtype'exfat'. The processing method is as follows: Ubuntu13.10 or install exfat-fuse: sudoapt-getinstallexfat-fuseUbuntu13.04 or below sudoapt-add-repositoryppa:relan/exfatsudoapt-getupdatesudoapt-getinstallfuse- exfatCentOS Linux mount exfat format USB disk error solution to load extfa in CentOS

What are the uses of the Type keyword in Go? What are the uses of the Type keyword in Go? Sep 06, 2023 am 09:58 AM

The usage of the Type keyword in Go includes defining new type aliases or creating new structure types. Detailed introduction: 1. Type alias. Use the "type" keyword to create an alias for an existing type. This alias does not create a new type, but only provides a new name for the existing type. Type aliases can improve code. The readability of the code makes the code clearer; 2. Structure type. Use the "type" keyword to create a new structure type. The structure is a composite type that can be used to define custom types containing multiple fields. etc.

How to encapsulate input components and unified form data in vue3 How to encapsulate input components and unified form data in vue3 May 12, 2023 pm 03:58 PM

Preparation Use vuecreateexample to create a project. The parameters are roughly as follows: use native input. Native input is mainly value and change. The data needs to be synchronized when changing. App.tsx is as follows: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//When the input box changes, synchronize the data constonInput=;return( )=>({

See all articles