图片在线转换base64

DEMO预览

图片在线转换base64—-实现方法

采用

FileReader

对象的

readAsDataURL

方法进行图片的转换！

JS实现

获取上传按钮，文字按钮，显示base64的结果，预览按钮，预览图片显示；
判断当前浏览器是否支持

FileReader

对象；
给上传按钮绑定 onchange 事件，判断上传的是图片文件；
清空预览图片和实例结果；
new 一个

FileReader

对象，在其加载完成时将该对的 result 赋值给‘显示base64的结果’的 textarea 中；
执行 readAsDataURL 方法，传入files[0]；
绑定预览结果！

(function(){
    // 获取上传按钮，文字按钮，显示base64的结果，预览按钮，预览图片显示
    var ruiUploadFile = document.getElementById('rui-upload-file');
    var uploadBtn = document.getElementById('upload-btn');
    var ruiBase64Result = document.getElementById('rui-base64-result');
    var previewImgBtn = document.getElementById('preview-img-btn');
    var ruiPreviewImg = document.getElementById('rui-preview-img');
    // 判断浏览器是否支持 FileReader
    window.onload = function(){
        if ( typeof(FileReader) === 'undefined' ){
            uploadBtn.innerHTML = '该浏览器不支持 FileReader，请更新您的浏览器！'
            ruiUploadFile.disabled = true;
        }
    }
    // 上传按钮绑定 onchange 事件
    ruiUploadFile.onchange = function(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){   
            alert("请确保文件为图像类型"); 
            return false; 
        }
        ruiBase64Result.value = '';
        ruiPreviewImg.src = '';
        var r = new FileReader();  
        r.onload = function(){
            ruiBase64Result.value = r.result;
        }
        r.readAsDataURL(file);
    }
    // 预览按钮绑定 click 事件
    previewImgBtn.addEventListener('click',function(){
        ruiPreviewImg.src = ruiBase64Result.value;
    },false);
}())

DOM结构

上传按钮；
显示转换结果；
预览按钮；
预览图片的显示位置。

// 上传按钮
<div class="rui-upload-btn">
    <input type="file" id="rui-upload-file" value="上传要转换成base64的图片">
    <span id="upload-btn">上传要转换成base64的图片</span>
</div>
// 显示转换结果
<div class="rui-base64-box">
    <textarea name="rui-base64-result" id="rui-base64-result">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ+2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLd+X3az/ufvdtcH6H7+d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLon+Hv+Ohxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAz+WY9pzSAGaAJeErq2/BXLob0GgQ+STgTflhJCMRpUxTxjMFbDl+EpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccS++jHU1Ii+h/eIX0UTi04d+G+bVtbqtcjdVorZi3Lk9/VHtw+Cx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/+L9dSqp+HS4+Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rC+gECIwg0AAAAASUVORK5CYII=</textarea>
</div>
// 预览按钮
<div  class="rui-upload-btn rui-btng" id="preview-img-btn">预览图片</div>
// 预览图片的显示位置
<div class="rui-img-preview">
    <img id="rui-preview-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ+2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLd+X3az/ufvdtcH6H7+d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLon+Hv+Ohxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAz+WY9pzSAGaAJeErq2/BXLob0GgQ+STgTflhJCMRpUxTxjMFbDl+EpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccS++jHU1Ii+h/eIX0UTi04d+G+bVtbqtcjdVorZi3Lk9/VHtw+Cx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/+L9dSqp+HS4+Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rC+gECIwg0AAAAASUVORK5CYII=" alt="">
</div>

CSS样式表

.rui-upload-btn{
    display: inline-block;
    border: 1px solid #ccc;
    font-size: 15px;
    color: #888;
    background-color: #eee;
    border-radius: 3px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    position: relative;
}
#rui-upload-file{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}
#rui-base64-result{
    width: 100%;
    height: 300px;
    resize: none;
    border-radius: 3px;
    outline: medium;
    box-sizing: border-box;
    padding: 10px;
}
.rui-base64-box{
    margin: 20px auto;
}
.rui-img-preview{
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 10px;
    margin: 20px auto;
}
.rui-btng{
    background-color: lightgreen;
    border-color: lightgreen;
    color: #fff;
}