JavaScript 中的FileReader對象（實現上傳圖片預覽）

時間 2019-11-06

標籤 javascript filereader 對象實現上傳圖片預覽欄目 JavaScript 简体版

原文原文鏈接

方法一：使用js的FileReader對象javascript

1、FileReader對象簡介html

1.檢測瀏覽器對FileReader的支持 java

if(window.FileReader) {
     var fr = new FileReader();
     // add your code here
 }
 else {
     alert("Not supported by your browser!");
 }

調用FileReader對象的方法 jquery

FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另外一個用來中斷讀取。下面的表格列出了這些方法以及他們的參數和功能，web

須要注意的是，不管讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在 result屬性中。ajax

方法名後端	參數瀏覽器	描述ui
abortthis	none	中斷讀取
readAsBinaryString	file	將文件讀取爲二進制碼
readAsDataURL	file	將文件讀取爲 DataURL
readAsText	file, [encoding]	將文件讀取爲文本

readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值爲 UTF-8。這個方法很是容易理解，將文件以文本方式讀取，讀取的結果便是這個文本文件中的內容。
readAsBinaryString：該方法將文件讀取爲二進制字符串，一般咱們將它傳送到後端，後端能夠經過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取爲一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這裏的小文件一般是指圖像與 html 等格式的文件。（其中base64的方式就是由此來得到的。。）

2. FileReader處理事件簡介

FileReader 包含了一套完整的事件模型，用於捕獲讀取文件時的狀態，下面這個表格概括了這些事件。

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

文件一旦開始讀取，不管成功或失敗，實例的 result 屬性都會被填充。若是讀取失敗，則 result 的值爲 null ，不然便是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。

fr.onload = function() { 
    this.result; 
};

　　例子1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FileReader</title>
</head>
<body>
    <p>
        <label>請選擇一個文件：</label>
        <input type="file" id="file" />
        <input type="button" value="讀取圖像" onclick="readAsDataURL()" />
        <input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" />
        <input type="button" value="讀取文本文件" onclick="readAsText()" />
    </p>
    <div id="result" name="result"></div>
    <script type="text/javascript">
        var result = document.getElementById("result");
        var file = document.getElementById("file");
        //判斷瀏覽器是否支持FileReader接口 
        if (typeof FileReader == 'undefined') {
            result.InnerHTML = "<p>你的瀏覽器不支持FileReader接口！</p>";

            //使選擇控件不可操做 
            file.setAttribute("disabled", "disabled");
        }

        function readAsDataURL() {

            //檢驗是否爲圖像文件 
            var file = document.getElementById("file").files[0];
            if (!/image\/\w+/.test(file.type)) {
                alert("看清楚，這個須要圖片！");
                return false;
            }

            var reader = new FileReader();
            //將文件以Data URL形式讀入頁面 
            reader.readAsDataURL(file);
            reader.onload = function (e) {

                var result = document.getElementById("result");

                //顯示文件 
                result.innerHTML = '<img src="' + this.result + '" alt="" />';
            }
        }

        function readAsBinaryString() {

            var file = document.getElementById("file").files[0];
            var reader = new FileReader();

            //將文件以二進制形式讀入頁面 
            reader.readAsBinaryString(file);
            reader.onload = function (f) {

                var result = document.getElementById("result");

                //顯示文件 
                result.innerHTML = this.result;
            }
        }

        function readAsText() {

            var file = document.getElementById("file").files[0];
            var reader = new FileReader();

            //將文件以文本形式讀入頁面 
            reader.readAsText(file);
            reader.onload = function (f) {
                var result = document.getElementById("result");

                //顯示文件 
                result.innerHTML = this.result;
            }
        }
    </script>
</body>
</html>

　　3 、使用js的FileReader對象實現上傳圖片時的圖片預覽功能

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no">
    <title>test</title>
    <script>

        //選擇圖片時預覽功能
        function imageshow(source) {
            var file = source.files[0];
            var imageid = source.id;

            if (window.FileReader) {
                var fr = new FileReader();
                fr.onloadend = function (e) {
                    document.getElementById("portrait" + imageid).src = e.target.result;
                };

                fr.readAsDataURL(file);
            }

            document.getElementById("image" + imageid).style.display = "none";
            document.getElementById("show" + imageid).style.display = "block";
        }
    </script>
</head>
<body>
    <div>
        <div id="image1">
            <p>上傳截圖</p>
            <input type="file" name="screenshot1" id="1" onchange="imageshow(this)" />
        </div>
        <div id="show1" style="display: none;">
            <img src="" id="portrait1" width="100" height="70">
        </div>

        <div id="image2">
            <p>上傳截圖</p>
            <input type="file" name="screenshot2" id="2" onchange="imageshow(this)" />
        </div>

        <div id="show2" style="display: none;">
            <img src="" id="portrait2" width="100" height="70">
        </div>

        <div id="image3">
            <p>上傳截圖</p>
            <input type="file" name="screenshot3" id="3" onchange="imageshow(this)" />
        </div>
        <div id="show3" style="display: none;">
            <img src="" id="portrait3" width="100" height="70">
        </div>
    </div>
</body>
</html>

方法二：使用window.createObjectURL

直接上代碼：

<!DOCTYPE html>
<html>
<head>
    <title>圖片上傳預覽</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
    <form name="form0" id="form0">
        <input type="file" name="file0" id="file0" multiple="multiple" />
        <br>
        <img src="" width="100" height="100" id="img0">
    </form>
    <script>
        $("#file0").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            console.log("objUrl = " + objUrl);
            if (objUrl) {
                $("#img0").attr("src", objUrl);
            }
        });

        //取得該文件的url 
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。