從html文件上傳元素獲取base64字符串

-1

我想將圖像從文件上傳元素轉換爲base64字符串。從html文件上傳元素獲取base64字符串

我發現了一個解決方案在這裏 How can you encode a string to Base64 in JavaScript?

的@SunnyMilenov的答案，但我不知道該怎麼傳遞給函數

encode : function (input) {...}

來源

2015-04-01 user4545762

爲HTML5和IE修訂答不HTML5

您需要使用FileReader.readAsDataURL（）來代替js fiddle示例

function getImage() { 
 

 
    var reader = new FileReader(); 
 
    var f = document.getElementById("file-select").files; 
 

 
    reader.onloadend = function() { 
 
     console.log(reader.result); 
 
    } 
 
    reader.readAsDataURL(f[0]); 
 

 
}

<form id="file-form" method="POST"> 
 
    <input type="file" id="file-select" /> 
 
</form> 
 
<button onclick="getImage()" id="upload-button">Convert</button>

對於IE沒有HTML5你需要使用ActiveX對象，並確保您允許ActiveX在Internet選項

enter image description here

<html> 

<head> 

<script> 

// from http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de 
function base64Encode(str) { 
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/"; 
    var out = "", i = 0, len = str.length, c1, c2, c3; 
    while (i < len) { 
     c1 = str.charCodeAt(i++) & 0xff; 
     if (i == len) { 
      out += CHARS.charAt(c1 >> 2); 
      out += CHARS.charAt((c1 & 0x3) << 4); 
      out += "=="; 
      break; 
     } 
     c2 = str.charCodeAt(i++); 
     if (i == len) { 
      out += CHARS.charAt(c1 >> 2); 
      out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4)); 
      out += CHARS.charAt((c2 & 0xF) << 2); 
      out += "="; 
      break; 
     } 
     c3 = str.charCodeAt(i++); 
     out += CHARS.charAt(c1 >> 2); 
     out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4)); 
     out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6)); 
     out += CHARS.charAt(c3 & 0x3F); 
    } 
    return out; 
} 

function readFile(filePath){ 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    f = fso.GetFile(filePath); 
    var textStream = f.OpenAsTextStream(); 
    var fileData = base64Encode(textStream.Read(f.size)); 
    textStream.close(); 

    return fileData; 
} 

function getImage() { 
    var filePath = document.getElementById("file-select").value; 
    var fileData = readFile(filePath); 
    document.getElementById("output").value = fileData; 
} 


</script> 


</head> 
<body> 


<form id="file-form" method="POST"> 
    <input type="file" id="file-select" /> 
</form> 
<button onclick="getImage()" id="upload-button">Convert</button> 

<br> 

<textarea id="output" cols="100" rows="20"></textarea> 

</body> 
</html>

來源

2015-04-01 05:56:05 vbranden

我想要IE 9或更早的 – user4545762 2015-04-01 07:38:19

看到我的解決方案與html5和即沒有html5的更新響應 – vbranden 2015-04-01 15:22:02

<!DOCTYPE html> 
<html> 
<style type="text/css"> 

</style> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    function convertImgToBase64(url, callback, outputFormat){ 
    var canvas = document.createElement('CANVAS'); 
    var ctx = canvas.getContext('2d'); 
    var img = new Image; 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     canvas.height = img.height; 
     canvas.width = img.width; 
     ctx.drawImage(img,0,0); 
     var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
     callback.call(this, dataURL); 
      // Clean up 
     canvas = null; 
    }; 
    img.src = url; 
    } 


    $('#img2b64').submit(function(event){ 
     var imageUrl = $(this).find('input[name=url]').val(); 
     console.log('imageUrl', imageUrl); 
     convertImgToBase64(imageUrl, function(base64Img){ 
      $('.output') 
       .find('textarea') 
        .val(base64Img) 
        .end() 
       .find('a') 
        .attr('href', base64Img) 
        .text(base64Img) 
        .end() 
       .find('img') 
        .attr('src', base64Img); 
     }); 

     event.preventDefault(); 
    }); 
}); 
</script> 
</head> 
<body> 
<h2>Input</h2> 
<form class="input-group" id="img2b64"> 
    <input 
     type="url" 
     name="url" 
     class="form-control" 
     placeholder="Insert an IMAGE-URL" 
     value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" 
     required> 
    <span class="input-group-btn"> 
     <input 
      type="submit" 
      class="btn btn-default"> 
    </span> 
</form> 

<hr> 

<h2>Output</h2>   
<div class="output"> 
    <textarea class="form-control"></textarea><br> 
    <a></a><br><br> 
    <img><br> 
</div> 
</body> 

</body> 
</html>

運行腳本

來源

2015-04-01 06:35:51

我不需要html5 – user4545762 2015-04-01 07:38:56

從html文件上傳元素獲取base64字符串

回答

相關問題