jQuery: Преобразование изображения в строку base64 при помощи jQuery

06/12/2021 23:33

jQuery может конвертировать изображение в строку base64. В этом руководстве вы узнаете, как преобразовать изображение в строку base64 перед загрузкой на веб-сервер.

Это руководство поможет вам преобразовать изображения в строку base 64 с помощью jQuery или jаvascript.

1. Преобразование изображения в строку base64 с помощью jQuery

Приведенный ниже код, преобразует ваше изображение в строку base64 с помощью jQuery или jаvascript на стороне клиента.

<!DOCTYPE html>
<html>
<head>
    <title>Convert image into base64 string using jQuery</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>  
</head>
<body>
<form>
 
    <input type="file" name="file" id="file" onchange="encodeImgtoBase64(this)">
 
    <button type="submit">Submit</button>
 
    <a id="convertImg" href=""></a>
 
</form>
</body>
<script type="text/jаvascript">
 
   function encodeImgtoBase64(element) {
 
      var file = element.files[0];
 
      var reader = new FileReader();
 
      reader.onloadend = function() {
 
        $("#convertImg").attr("href",reader.result);
 
        $("#convertImg").text(reader.result);
 
      }
 
      reader.readAsDataURL(file);
 
    }
 
</script>
</html>

Примечание: не забудьте включить библиотеку jQuery на свою веб-страницу.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

2. Преобразование изображения в строку base64 и отображение изображения на веб-странице jQuery

В приведенном ниже примере мы преобразуем изображение в строку base64 и отобразим изображение на веб-странице.

<!DOCTYPE html>
<html>
<head>
    <title>Convert image into base64 string using jQuery</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>  
</head>
<body>
<form>
 
    <input type="file" name="file" id="file" onchange="encodeImgtoBase64(this)">
 
    <button type="submit">Submit</button>
 
    <a id="convertImg" href=""></a>
 
    <br>
 
    <img src="" alt="" id="base64Img" width="500">
 
</form>
</body>
<script type="text/jаvascript">
 
   function encodeImgtoBase64(element) {
 
      var file = element.files[0];
 
      var reader = new FileReader();
 
      reader.onloadend = function() {
 
        $("#convertImg").attr("href",reader.result);
 
        $("#convertImg").text(reader.result);
 
        $("#base64Img").attr("src", reader.result);
 
      }
 
      reader.readAsDataURL(file);
 
    }
 
</script>
</html>

Jquery / Javascript

0 + 0 -

MakeCodes
0
566