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信箱登陸入口在哪裡

7490

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

熱門話題