首頁 > web前端 > js教程 > 主體

input type=file 選擇圖片並且實現預覽效果詳解

小云云
發布: 2018-01-02 16:00:29
原創
4004 人瀏覽過

本文主要為大家帶來一篇input type=file 選擇圖片並且實現預覽效果的實例。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

透過標籤,給它指定type類型為file,可提供檔案上傳;

accept:可選擇上傳類型,如:只要傳遞圖片,且不限制圖片格式,為image/*;

multiple:規定是否可以選擇多個檔案;

規定只可上傳圖片,且可以選擇多個檔案

登入後複製

當然,直接一個input type=file 只能選擇上傳的檔案/資源,如果我們需要在選擇圖片之後,在目前頁面實現預覽效果,那麼我們可以如下方式來實作

HTML程式碼


  

       

  

       

登入後複製

css樣式檔

登入後複製

JS程式碼

登入後複製

*以上js程式碼中有使用到jQuery,因此要引入jQuery檔案

相關推薦:

file控制選擇圖片實例教學

HTML5 Plus 實作手機APP拍照或相簿選擇圖片上傳功能的實例代碼

input選擇圖片後不上傳及時顯示

以上是input type=file 選擇圖片並且實現預覽效果詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!