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;
}总结
通过整个流程可以看出，FileReader 对象是先将图片转化为base64，然后再进行的预览，由此可以知，该对象还能制作前端的图片预览功能！