input type=file 选择图片并且实现预览效果详解
本文主要为大家带来一篇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文件
相关推荐：
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能的实例代码
Atas ialah kandungan terperinci input type=file 选择图片并且实现预览效果详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Aplikasi asli Hongmeng puisi rawak
Feb 19, 2024 pm 01:36 PM
Untuk mengetahui lebih lanjut tentang sumber terbuka, sila lawati: Komuniti Pembangun 51CTO Hongmeng https://ost.51cto.com Persekitaran berjalan DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. Untuk membuat aplikasi, klik Fail- >newFile->CreateProgect. Pilih templat: [OpenHarmony] EmptyAbility: Isikan nama projek, shici, nama pakej aplikasi com.nut.shici dan lokasi storan aplikasi XXX (tiada bahasa Cina, aksara khas atau ruang). CompileSDK10, Model: Stage. Peranti
Gunakan fungsi File.length() java untuk mendapatkan saiz fail
Jul 24, 2023 am 08:36 AM
Gunakan fungsi File.length() Java untuk mendapatkan saiz fail Saiz fail adalah keperluan yang sangat biasa apabila berurusan dengan operasi fail Java menyediakan cara yang sangat mudah untuk mendapatkan saiz fail, iaitu, menggunakan panjang(. ) kaedah kelas Fail. Artikel ini akan memperkenalkan cara menggunakan kaedah ini untuk mendapatkan saiz fail dan memberikan contoh kod yang sepadan. Pertama, kita perlu mencipta objek Fail untuk mewakili fail yang kita ingin dapatkan saiznya. Berikut ialah cara membuat objek Fail: Filef
Bagaimana untuk menukar gumpalan php kepada fail
Mar 16, 2023 am 10:47 AM
Cara menukar gumpalan php kepada fail: 1. Buat fail sampel php 2. Melalui "function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' }) } ” kaedah boleh digunakan untuk menukar Blob kepada Fail.
Namakan semula fail menggunakan fungsi File.renameTo() java
Jul 25, 2023 pm 03:45 PM
Gunakan fungsi File.renameTo() Java untuk menamakan semula fail Dalam pengaturcaraan Java, kita selalunya perlu menamakan semula fail. Java menyediakan kelas Fail untuk mengendalikan operasi fail, dan fungsi renameTo() boleh menamakan semula fail dengan mudah. Artikel ini akan memperkenalkan cara menggunakan fungsi File.renameTo() Java untuk menamakan semula fail dan menyediakan contoh kod yang sepadan. Fungsi File.renameTo() ialah kaedah kelas Fail.
Apakah kegunaan kata kunci Jenis dalam Go?
Sep 06, 2023 am 09:58 AM
Penggunaan kata kunci Jenis dalam Go termasuk menentukan alias jenis baharu atau mencipta jenis struktur baharu. Pengenalan terperinci: 1. Jenis alias Gunakan kata kunci "jenis" untuk mencipta alias untuk jenis sedia ada, tetapi hanya memberikan nama baharu untuk jenis alias yang sedia ada kebolehbacaan kod menjadikan kod lebih jelas;
Selesaikan ralat cakera keras mudah alih pemasangan Ubuntu: exfat jenis sistem fail tidak diketahui
Jan 05, 2024 pm 01:18 PM
Ralat berlaku apabila ubuntu memasang cakera keras mudah alih: mount: unknownfilesystemtype'exfat' Kaedah pemprosesan adalah seperti berikut: Ubuntu13.10 atau install exfat-fuse: sudoapt-getinstallexfat-fuseUbuntu13.04 atau di bawah sudoapt-add-repositoryppa:relan. /exfatsudoapt-getupdatesudoapt-getinstallfuse- exfatCentOS Linux memasang format exfat penyelesaian ralat cakera USB untuk memuatkan extfa dalam CentOS
Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3
May 12, 2023 pm 03:58 PM
Penyediaan Gunakan vuecreateexample untuk mencipta projek Parameternya adalah seperti berikut: gunakan input asli terutamanya nilai dan perubahan. App.tsx adalah seperti berikut: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Apabila kotak input berubah, segerakkan data constonInput =;kembali( )=>({
Gunakan fungsi File.getParent() java untuk mendapatkan laluan induk fail
Jul 24, 2023 pm 01:40 PM
Gunakan fungsi File.getParent() java untuk mendapatkan laluan induk fail Dalam pengaturcaraan Java, kita selalunya perlu mengendalikan fail dan folder. Kadangkala, kita perlu mendapatkan laluan induk bagi fail, iaitu laluan folder tempat fail itu berada. Kelas Fail Java menyediakan kaedah getParent() untuk mendapatkan laluan induk bagi fail atau folder. Kelas Fail ialah perwakilan abstrak Java bagi fail dan folder. Ia menyediakan satu siri kaedah untuk mengendalikan fail dan folder. Antaranya, dapatkan
