安徽网站建设SEO优化制作设计公司,淘宝客网站怎么做,跨境电商如何开店,域名解析查询DEMO预览 图片在线转换base64 图片在线转换base64—-实现方法 采用 FileReader 对象的 readAsDataURL 方法进行图片的转换#xff01; JS实现 获取上传按钮#xff0c;文字按钮#xff0c;显示base64的结果#xff0c;预览按钮#xff0c;预览图片显示#xff1b;判断当前… DEMO预览 图片在线转换base64 图片在线转换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);// 判断浏览器是否支持 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结构 上传按钮显示转换结果预览按钮预览图片的显示位置。// 上传按钮
div classrui-upload-btninput typefile idrui-upload-file value上传要转换成base64的图片span idupload-btn上传要转换成base64的图片/span
/div
// 显示转换结果
div classrui-base64-boxtextarea namerui-base64-result idrui-base64-resultdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLdX3az/ufvdtcH6H7d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLonHvOhxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAzWY9pzSAGaAJeErq2/BXLob0GgQSTgTflhJCMRpUxTxjMFbDlEpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccSjHU1Iih/eIX0UTi04dGbVtbqtcjdVorZi3Lk9/VHtwCx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/L9dSqpHS4Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rCgECIwg0AAAAASUVORK5CYII/textarea
/div
// 预览按钮
div classrui-upload-btn rui-btng idpreview-img-btn预览图片/div
// 预览图片的显示位置
div classrui-img-previewimg idrui-preview-img srcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLdX3az/ufvdtcH6H7d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLonHvOhxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAzWY9pzSAGaAJeErq2/BXLob0GgQSTgTflhJCMRpUxTxjMFbDlEpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccSjHU1Iih/eIX0UTi04dGbVtbqtcjdVorZi3Lk9/VHtwCx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/L9dSqpHS4Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rCgECIwg0AAAAASUVORK5CYII 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
