2. 程式人生 > >FileReader 獲取圖片BASE64 程式碼 並預覽

FileReader 獲取圖片BASE64 程式碼 並預覽

阿新 • • 發佈：2019-02-04

FileReader 獲取圖片的base64 程式碼 並預覽

FileReader ，老實說我也不怎麼熟悉。在這裡只是記錄使用方法。

方法名 引數 描述
abort none 中斷讀取
readAsBinaryString file（blob） 將檔案讀取為二進位制碼
readAsDataURL file（blob） 將檔案讀取為 DataURL
readAsText file, （blob） 將檔案讀取為文字

FileReader 包含了一套完整的事件模型，用於捕獲讀取檔案時的狀態

事件 描述
onabort 中斷時觸發
onerror 出錯時觸發
onload 檔案讀取成功完成時觸發
onloadend 讀取完成觸發，無論成功或失敗
onloadstart 讀取開始時觸發
onprogress 讀取中

檔案一旦開始讀取，無論成功或失敗，例項的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程式都會在成功讀取檔案的時候，抓取這個值。

demo

<!DOCTYPE html>
<html>
 

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
<input type="file" class="file" name="imgfile" id="imgfile" placeholder="請選擇檔案">
<img
 
 src="" id="showImg" >

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
var input = document.getElementById("imgfile");
//檢測瀏覽器是否支援FileReader
 if (typeof (FileReader) === 'undefined') {
     result.innerHTML = "抱歉，你的瀏覽器不支援 FileReader，請使用現代瀏覽器操作！";
     input.setAttribute('disabled', 'disabled');
 } else {
 //開啟監聽
     input.addEventListener('change', readFile, false);
 }
function readFile() {
    var file = this.files[0];

     //限定上傳檔案的型別，判斷是否是圖片型別
     if (!/image\/\w+/.test(file.type)) {
         alert("只能選擇圖片");
         return false;
    }
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function (e) {
       base64Code=this.result;
        //把得到的base64賦值到img標籤顯示
       $("#showImg").attr("src",base64Code);
     }
  }
</script>


</body>
</html>

正文到此結束，謝謝觀看 ，如果覺得有用的話，點個贊可好！

相關推薦

FileReader 獲取圖片BASE64 程式碼 並預覽

FileReader 獲取圖片的base64 程式碼 並預覽 FileReader ，老實說我也不怎麼熟悉。在這裡只是記錄使用方法。 方法名 引數 描述 abort

html5 FileReader 實現本地圖片上傳並預覽應用例項

var box=document.getElementById("box");                 var box2=document.getElementById("box2");                 box.ondragover=function(e)              

前端H5實現多圖片上傳並預覽

多檔案上傳並預覽 利用input 的type='file" 可以實現檔案的上傳，不過只支援單個檔案上傳。只有給input加上multiple屬性才能實現多個檔案同時上傳。 好了，下面我們來實現一個簡單的多圖片上傳並預覽的例子 <div class="input-file-box

JQuery Ajax實現圖片上傳並預覽

本文通過使用 JQuery 、AjaxUpload非同步頭像上傳並實現實時預覽** 效果預覽如下 如果上傳圖片後，專案圖片資料夾不能顯示上傳圖片，頁面也不能展示圖片，手動重新整理後就能看到，解決方法： 需要自己設定Myeclipse : Window---->Prefe

tp5簡單的多圖片上傳並預覽demo

今天沒事去研究了一下多圖片同時上傳，看了很多案例，也下載了一些外掛，感覺都很複雜，就自己想了一個思路，做了個簡單的demo，程式碼貼出來，供大家參考一下。由於我也是小菜鳥，所以程式碼裡有什麼問題歡迎大家提出來。 這個多圖上傳的思路是：先新增一個<input type

Ajax實現圖片上傳並預覽

效果見尾部。 最近在使用ThinkPHP5開發專案中客戶有一個需求是在圖片上傳時附帶預覽功能。雖然現在有很多的外掛能實現，但是還是覺得自己寫比較好。我們知道，圖片上傳需要一個input:file表單 <input type='file' name='pic'>

用javascript實現圖片上傳並預覽

/** * Created by Administrator on 2016/4/28. */ //上傳圖片並預覽 function previewImg(fileInput,imgDiv){ if(window.F

Bootstrap多圖片上傳並預覽（tp5）

Bootstrap多圖上傳版本1.0（1）非同步上傳檔案並儲存到資料庫（2）限制檔案上傳個數（3）監聽檔案是否上傳成功一、控制器//多圖上傳 public function imgupload() {

ajax非同步請求提交上傳圖片表單並預覽圖片

一、表單上傳檔案必須加上enctype="multipart/form-data"，（以下是上傳檔案的表單） <form action="<%=basePath%>UploadImage" method="post" id="uploadForm" en

[轉]html之file標簽 --- 圖片上傳前預覽 -- FileReader

disabled scrip ade java undefine 內容 .com 知識 nim 記得以前做網站時，曾經需要實現一個圖片上傳到服務器前，先預覽的功能。當時用html的<input type="file"/>標簽一直實現不了，最後舍棄了這個標簽，使用

js上傳圖片並預覽

width view 直接 ali 上傳圖片並預覽 class tar result null 一：html代碼 <input id="upload_image" type="file" accept="image/*" capture="camera"onch

上傳圖片並預覽

div str mms con PE onload pac att nload <div class="mms_uploadIconBox" > <input class="mms_add_imgBox" style="opaci

基於jQuery和cropper點選頭像上傳並預覽裁剪圖片

使用jquery上傳前，預覽圖片，裁剪，示例使用php接收上傳的檔案，並且儲存為裁剪後的圖片。不需要上傳後再裁剪圖片，只需要本地裁剪好即可，裁剪的時候也可以旋轉圖片。裁剪控制元件使用了，cropper。 html程式碼 <!DOCTYPE html> <html la

選擇並預覽圖片

html: <input id="file" @change="changeImg($event)" type="file" class="file" accept="image/png,image/jpeg,image/gif"> js: changeImg(event){

input上傳圖片並預覽

首先說一下input 大家都知道上傳檔案，圖片是通過input 的file進行上傳的。 1. 首先是樣式 大家都知道input在HTML的程式碼為 <input typ

使用FormData格式上傳影象並預覽圖片

前言 做專案時，遇到表單中影象需要跟表單一起提交，這樣會造成後臺沒辦法接收到圖片。後面上網調查後，明白表單提交時是預設application/x-www-form-urlencoded格式，只接受鍵

ajaxFileUpload實現圖片的上傳並預覽

先來個最簡單的  單圖上傳並預覽 html: <script src="/content/js/jquery-1.10.2.min.js"></script> <script src="/content/js/ajaxfileup

apicloud 上傳頭像或圖片並預覽

點選頭像自動上傳 <div class="head" tapmode onclick="showAction()"><img id="img_src" src="../image/preview.jpg"/></div> // 點選

使用img src Base64 實現圖片的傳輸和預覽

大家可能注意到了，網頁上有些圖片的src或css背景圖片的url後面跟了一大串字元，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZ

利用formdata非同步上傳圖片並預覽圖片

<img src="" style="width: 120px;margin-bottom: 5px" id="previewimg0"> <form action="" enctype="multipart/form-data" id="form0"> <input