使用HTML5的File實現(xiàn)base64和圖片的互轉(zhuǎn)

字號:


    剛接觸到一個內(nèi)聯(lián)圖片的概念,內(nèi)聯(lián)圖片即使把圖片文件編碼成base64 看下面代碼即是內(nèi)聯(lián)問題
    可以減少http的請求,缺點是不能跨域緩存!
    代碼如下:
    <img src="data:image/jpeg;base64,/9j/4QqsRX...">
    然后在線如何把圖片轉(zhuǎn)化成base64
    如果只依靠單純的javascript是有權(quán)限問題的 js不允許操作本地的file文件或文件夾 為了安全問題
    現(xiàn)在html5來了 百度了下有不少資料 中文的也不少 給下w3c的文檔 http://www.w3.org/TR/FileAPI/
    現(xiàn)在我們用html5的file api里的 readAsDataURL函數(shù) 這是一個把文件轉(zhuǎn)化成base64編碼的
    代碼如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>簡單的html5 File測試 for pic2base64</title>
    <style>
    </style>
    <script>
    window.onload = function(){
    var input = document.getElementById("demo_input");
    var result= document.getElementById("result");
    var img_area = document.getElementById("img_area");
    if ( typeof(FileReader) === 'undefined' ){
    result.innerHTML = "抱歉,你的瀏覽器不支持 FileReader,請使用現(xiàn)代瀏覽器操作!";
    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){
    result.innerHTML = '<img src="'+this.result+'"/>';
    img_area.innerHTML = '<div>圖片img標簽展示:</div><img src="'+this.result+'"/>';
    }
    }
    </script>
    </head>
    <body>
    <input type="file" value="sdgsdg" id="demo_input" />
    <textarea id="result" rows=30 cols=300></textarea>
    <p id="img_area"></p>
    </body>
    </html>