DEMO预览

图片在线转换base64

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

采用 FileReader 对象的 readAsDataURL 方法进行图片的转换！

JS实现

  1. 获取上传按钮，文字按钮，显示base64的结果，预览按钮，预览图片显示；
  2. 判断当前浏览器是否支持 FileReader 对象；
  3. 给上传按钮绑定 onchange 事件，判断上传的是图片文件；
  4. 清空预览图片和实例结果；
  5. new 一个 FileReader 对象，在其加载完成时将该对的 result 赋值给‘显示base64的结果’的 textarea 中；
  6. 执行 readAsDataURL 方法，传入files[0]；
  7. 绑定预览结果！
(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');// 判断浏览器是否支持 FileReaderwindow.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结构

  1. 上传按钮；
  2. 显示转换结果；
  3. 预览按钮；
  4. 预览图片的显示位置。
// 上传按钮
<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，然后再进行的预览，由此可以知，该对象还能制作前端的图片预览功能！

DEMO预览

图片在线转换base64

DEMO下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

转载于:https://www.cnblogs.com/linewman/p/9918447.html