快捷導(dǎo)航

js實(shí)現(xiàn)上傳圖片功能

更新時(shí)間：2021年11月08日 10:02:47 作者：雪旭

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前端上傳圖片的原理是：運(yùn)用input type=“file”的標(biāo)簽獲取圖片，再使用FileReader這個(gè)對象 new 一個(gè)實(shí)例，通過這個(gè)對象的readAsDataURL()方法讀取file標(biāo)簽獲取的圖片并轉(zhuǎn)換為base64格式，完成之后通過ajax之類的方式傳到后臺。

HTML

需要一個(gè)input type="file" 的標(biāo)簽如果需要預(yù)覽的話可以再加一個(gè)img標(biāo)簽

<div class="warp">
            <div class="warp-content">點(diǎn)擊上傳</div>
            <input type="file" id="file" />
</div>

 
<img src="" />

JS

一、圖片上傳需要檢測上傳的圖片是否變化，所以這里選擇js的onchange事件.先獲取input,img的dom元素,在input type=‘file'的demo元素下，有一個(gè)files屬性，里面是我們上傳的文件信息，打印一下，就可以看到上傳文件的名字，類型等信息。

var file = document.getElementById('file');
var image = document.querySelector("img");
file.onchange = function() {
    var fileData = this.files[0];//這是我們上傳的文件
}

二、然后運(yùn)用 FileReader 這個(gè)對象，F(xiàn)ileReader主要用于將文件內(nèi)容讀入內(nèi)存，通過一系列異步接口，可以在主線程中訪問本地文件。使用FileReader對象，web應(yīng)用程序可以異步的讀取存儲在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容，可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據(jù)。這里用到了里面的 readAsDataURL 這個(gè)方法，它能把文件用base64格式讀出。

使用方法

var reader = new FileReader();
reader.readAsDataURL(fileData);//異步讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示
/*當(dāng)讀取操作成功完成時(shí)調(diào)用*/
reader.onload = function(e) {
    console.log(e); //查看對象屬性里面有個(gè)result屬性，屬性值，是一大串的base64格式的東西，這個(gè)就是我們要的圖片
    console.log(this.result);//取得數(shù)據(jù) 這里的this指向FileReader（）對象的實(shí)例reader
    image.setAttribute("src", this.result)//賦值給img標(biāo)簽讓它顯示出來 
}

FileReader對象的屬性和事件

FileReader對象官方文檔

三、第二步操作完成我們就可以上傳圖片的功能了，用戶再使用時(shí)我們不能保證用戶上傳的是什么東西，圖片還是視頻，需要判斷一下上傳的文件類型 input type=‘file'的demo元素下，有一個(gè)files屬性它里面有文件類型的信息，我們可以通過這屬性來判斷上傳文件類型。（reader.onload里面通過this.result可以獲得圖片的base64格式，把它賦值給一個(gè)變量傳到后臺，這樣就完成了一個(gè)圖片上傳）

var file = document.getElementById('file');
var image = document.querySelector("img");
file.onchange = function() {
    var fileData = this.files[0];//獲取到一個(gè)FileList對象中的第一個(gè)文件(File 對象),是我們上傳的文件
    var pettern = /^image/;                
    console.info(fileData.type)

    if (!pettern.test(fileData.type)) {
        alert("圖片格式不正確");
        return;
     }
      var reader = new FileReader();
      reader.readAsDataURL(fileData);//異步讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示
      /*當(dāng)讀取操作成功完成時(shí)調(diào)用*/
       reader.onload = function(e) {
          console.log(e); //查看對象
          console.log(this.result);//要的數(shù)據(jù)
          image.setAttribute("src", this.result)
       }
}

全部代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .warp {
                display: inline-block;
                vertical-align: bottom;
                position: relative;

            }

            .warp-content {
                border: 1px solid red;
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
            }

            input {
                position: absolute;
                top: 0;
                left: 0;
                border: 1px solid red;
                width: 150px;
                height: 150px;
                opacity: 0;
                cursor: pointer;
            }

            img {
                width: 300px;
                height: 300px;
                border: 1px solid red;
                margin-top: 50px;
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <div class="fileBox">
            
            <div class="warp">
                <div class="warp-content">點(diǎn)擊上傳</div>
                <input type="file" id="file" />
            </div>

            <img src="" />
        </div>
        <script type="text/javascript">
            var file = document.getElementById('file');
            var image = document.querySelector("img");
            file.onchange = function() {
                var fileData = this.files[0];//獲取到一個(gè)FileList對象中的第一個(gè)文件( File 對象),是我們上傳的文件
                var pettern = /^image/;
                
                console.info(fileData.type)

                if (!pettern.test(fileData.type)) {
                    alert("圖片格式不正確");
                    return;
                }
                var reader = new FileReader();
                reader.readAsDataURL(fileData);//異步讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示
                /*當(dāng)讀取操作成功完成時(shí)調(diào)用*/
                reader.onload = function(e) {
                    console.log(e); //查看對象
                    console.log(this.result);//要的數(shù)據(jù) 這里的this指向FileReader（）對象的實(shí)例reader
                    image.setAttribute("src", this.result)
                }
            }
        </script>
    </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: