原生上传file 预览图片转码base64

最新推荐文章于 2023-04-12 00:11:31 发布

飞奔的大土豆

最新推荐文章于 2023-04-12 00:11:31 发布

阅读量612

点赞数

分类专栏： java基础-技术点文章标签： fileCfakepathred.jpg

本文链接：https://blog.csdn.net/qq_32447321/article/details/54343501

版权

java基础-技术点专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<div class="form-group">
<label class="col-sm-4 control-label" for="remark">企业logo:</label>
<div class="col-sm-8" style="width: 60%;">
<input id="input-4" name="file" type="file" class="file-loading" οnchange="onFileSelect(showimg,this.form.file,event)" />

<img name="showimg" id="showimg" src="../../common/img/image/user_128x128.png" style="width: 50px;height: 50px;" alt="预览图片" />
</div>

</div>

/**
* 选择上传图片显示img名称
*/

function onFileSelect(preview,el,e){
// let el = document.querySelector('input[type="file"]');//定位到file位置
// let preview = document.querySelector('img');//定位到预览位置
if (e.target.files.length) {
let file = e.target.files[0];
let reader = new FileReader();
reader.onloadend = () => {
console.log(reader);//把图片转为base64码加载显示
preview.src = reader.result;
}
reader.readAsDataURL(file);
}
/*var el = document.querySelector('input[type="file"]')
var preview = document.querySelector('img')
el.addEventListener('change',function (e){
if( e.target.files.length ){
var file = e.target.files[0]
var reader = new FileReader();
reader.onloadend = function() {
preview.src = reader.result;
}
reader.readAsDataURL(file);
}
})*/
// el.addEventListener('change', (e) => {
// console.log(e);
// if (e.target.files.length) {
// let file = e.target.files[0];
// let reader = new FileReader();
// reader.onloadend = () => {
// console.log(reader);//把图片转为base64码加载显示
// preview.src = reader.result;
// }
// reader.readAsDataURL(file);
// }
// });
}