将文件转成编码base64码

  1. 选择图片:  
  2. <input type="file" id="img">  
  3. <br/>  
  4. <button id="start">开始转换</button>  
  5. <div>  
  6.     预览:<img id="imgShow" src="" alt="">  
  7. </div>  
  8. <b>Base64数据:</b>  
  9. <textarea rows=15 cols=60 id="conte"></textarea>  
  10. <button id='cpData'>复制</button><span id="succ"></span>  
  11. <div id="len">数据长度:</div>  
  12. <script>  
  13.     var img = document.getElementById('img')  
  14.         , imgShow = document.getElementById('imgShow')  
  15.         , conte = document.getElementById('conte')  
  16.         , len = document.getElementById('len')  
  17.         , start = document.getElementById('start')  
  18.         , cpData = document.getElementById('cpData');  
  19.   
  20.     cpData.addEventListener('click', cpDataF);  
  21.     start.addEventListener('click', startt);  
  22.   
  23.     /*转换函数*/  
  24.     function startt() {  
  25.         var imgFile = new FileReader();  
  26.         imgFile.readAsDataURL(img.files[0]);  
  27.         imgFile.onload = function () {  
  28.             var imgData = this.result; //base64数据    
  29.             imgShow.setAttribute('src', imgData);  
  30.             conte.value = imgData;  
  31.             len.innerHTML += imgData.length;  
  32.         }  
  33.     }  
  34.   
  35.     /*复制数据*/  
  36.     function cpDataF() {  
  37.         conte.select(); // 选择对象    
  38.         var cpd=document.execCommand("Copy"); // 执行浏览器复制命令    
  39.         cpd ? document.getElementById('succ').innerHTML = '复制成功' : console.warn('复制失败');  
  40.         window.setTimeout(function () {  
  41.             document.getElementById('succ').innerHTML = '';  
  42.         }, 1000)  
  43.     }  
  44. </script>  

猜你喜欢

转载自blog.csdn.net/settingSun66/article/details/54729053