FileReader與URL.createObjectURL實現圖片、視頻上傳預覽

時間 2019-11-08

標籤 filereader url.createobjecturl url createobjecturl 實現圖片視頻上傳預覽欄目 HTTP/TCP 简体版

原文原文鏈接

以前作圖片、視頻上傳預覽經常使用的方案是先把文件上傳到服務器，等服務器返回文件的地址後，再把該地址字符串賦給img或video的src屬性，這才實現所謂的文件預覽。實際上這只是文件「上傳後再預覽」，這既浪費了用戶的時間，也浪費了不可輕視的流量。

最近上網查資料才知道其實能夠很輕鬆地實現「上傳前預覽」。實現方法有兩種：FileReader和URL.createObjectURL。

關於FileReader的講解能夠看這裏javascript

關於URL.createObjectURL方法的講解和應用能夠看這裏css

demo地址html

直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>preview</title>
    <style> * { box-sizing: border-box; } .section { margin: 20px auto; width: 500px; border: 1px solid #666; text-align: center; } .preview { width: 100%; margin-top: 10px; padding: 10px; min-height: 100px; background-color: #999; } .preview img, .preview video { width: 100%; } </style>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="section">
        <p>方案1</p>
        <input class="upload" type="file" onchange=onUpload1(this.files[0])>
        <div class="preview preview1"></div>
    </div>

    <div class="section">
        <p>方案2</p>
        <input class="upload" type="file" onchange=onUpload2(this.files[0])>
        <div class="preview preview2"></div>
    </div>
    <script> function onUpload1 (file) { var fr = new FileReader(); fr.readAsDataURL(file); // 將文件讀取爲Data URL fr.onload = function(e) { var result = e.target.result; if (/image/g.test(file.type)) { var img = $('<img src="' + result + '">'); $('.preview1').html('').append(img); } else if (/video/g.test(file.type)) { var vidoe = $('<video controls src="' + result + '">'); $('.preview1').html('').append(vidoe); } } } function onUpload2 (file) { var blob = new Blob([file]), // 文件轉化成二進制文件 url = URL.createObjectURL(blob); //轉化成url if (/image/g.test(file.type)) { var img = $('<img src="' + url + '">'); img[0].onload = function(e) { URL.revokeObjectURL(this.src); // 釋放createObjectURL建立的對象 } $('.preview2').html('').append(img); } else if (/video/g.test(file.type)) { var video = $('<video controls src="' + url + '">'); $('.preview2').html('').append(video); video[0].onload = function(e) { URL.revokeObjectURL(this.src); // 釋放createObjectURL建立的對象 } } } </script>
</body>
</html>複製代碼