Detailed explanation of input type=file to select pictures and achieve preview effects-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

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

1	`<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

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7454

CakePHP Tutorial

1375

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

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

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

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.

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.

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.

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

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( )=>({

Use java's File.getParentFile() function to get the parent directory of the file Jul 27, 2023 am 11:45 AM

Use java's File.getParentFile() function to get the parent directory of a file. In Java programming, we often need to operate files and folders. When we need to get the parent directory of a file, we can use the File.getParentFile() function provided by Java. This article explains how to use this function and provides code examples. File class in Java is the main class used to operate files and folders. It provides many methods to obtain and manipulate file properties

See all articles