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

矫情吗；* 2022-07-13 13:42 264阅读 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>![Center][]

/\*\*  
 \* 选择上传图片显示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);  
// \}  
//\});  
\}![Center 1][]

[Center]: /images/20220713/69e052b273f64e5fbc5b96bfa3f3d7e4.png
[Center 1]: /images/20220713/c4310d3a762d4069a6405bd6ba3bc57b.png