imgのbase64コンテンツを取得する方法

タイトル、小さな説明、の画像をbase64に送信しようとしていますと投稿の完全な説明。私の問題画像のためである、私はに画像を変換する方法がわからないのjQuery 3.1.1 ここでは私のコードです：imgのbase64コンテンツを取得する方法

$(".submit-btn").click(function() { 
 
    var titre = $(".title").val(); 
 
    var description = $(".description").val(); 
 
    var img = $(".img").val(); 
 
    var full = $(".full").val(); 
 
    var posting = $.post("http://localhost:8888/api/addPost.php", { 
 
     title: titre, 
 
     desc: description, 
 
     image: img, 
 
     fullDesc: full 
 
    }); 
 
    });

@import url("http://code.ionicframework.com/1.3.2/css/ionic.css"); 
 
input[type='file'] { 
 
    color: transparent; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
\t <label class="item item-input"> 
 
\t  <input type="text" placeholder="Title" class="title"> 
 
\t </label> 
 
\t <label class="item item-input"> 
 
\t  <input class="description" type="text" placeholder="Simple Description (max 60 caracters)" maxlength="60"> 
 
\t </label> 
 
\t <label class="item item-input"> 
 
\t  <div> 
 
\t  \t <span id='button_upload'>Image : </span> 
 
\t \t  <input type='file' class="img"> 
 
\t \t </div> 
 
\t </label> 
 
\t <label class="item item-input"> 
 
\t  <textarea placeholder="Full description" class="full"></textarea> 
 
\t </label> 
 
\t \t <div class="padding"> 
 
\t \t <button class="button button-block button-positive submit-btn"> 
 
\t  Submit 
 
\t  </button> 
 
    \t </div> 
 
\t </div>

出典

2017-01-27 dev.arguiot

FileReader.readAsDataURL（）の使用を検討してください。https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

$(".submit-btn").click(function() { 
var reader = new FileReader(); 
var titre = $(".title").val(); 
var description = $(".description").val(); 
var img = $(".img").files[0]?reader.readAsDataURL($(".img").files[0]):'No image'; 
var full = $(".full").val(); 
var posting = $.post("http://localhost:8888/api/addPost.php", { 
    title: titre, 
    desc: description, 
    image: img, 
    fullDesc: full 
}); 
});

出典

2017-01-27 02:46:08

$(".submit-btn").click(function() { 
 
    var titre = $(".title").val(); 
 
    var description = $(".description").val(); 
 
    var full = $(".full").val(); 
 
    var files = $(".img")[0].files; 
 
    if (files && files[0]) { 
 
     var filereader = new FileReader(); 
 
     filereader.onload = function(e) { 
 
     console.log(e.target.result); 
 
     var posting = $.post("http://localhost:8888/api/addPost.php", { 
 
      title: titre, 
 
      desc: description, 
 
      image: e.target.result, 
 
      fullDesc: full 
 
     }); 
 
     } 
 
     filereader.readAsDataURL(files[0]); 
 
    } 
 
    });

@import url("http://code.ionicframework.com/1.3.2/css/ionic.css"); 
 
input[type='file'] { 
 
    color: transparent; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
\t <label class="item item-input"> 
 
\t  <input type="text" placeholder="Title" class="title"> 
 
\t </label> 
 
\t <label class="item item-input"> 
 
\t  <input class="description" type="text" placeholder="Simple Description (max 60 caracters)" maxlength="60"> 
 
\t </label> 
 
\t <label class="item item-input"> 
 
\t  <div> 
 
\t  \t <span id='button_upload'>Image : </span> 
 
\t \t  <input type='file' class="img"> 
 
\t \t </div> 
 
\t </label> 
 
\t <label class="item item-input"> 
 
\t  <textarea placeholder="Full description" class="full"></textarea> 
 
\t </label> 
 
\t \t <div class="padding"> 
 
\t \t <button class="button button-block button-positive submit-btn"> 
 
\t  Submit 
 
\t  </button> 
 
    \t </div> 
 
\t </div>

出典

2017-01-27 02:38:47

FileReaderを使用できます。

例：here
Mozillaのドキュメント：例えばhere

：

<html> 
    <head> 
     <script> 
      function readFile(event) { 
       var input = event.target; 

       if (input.files && input.files.length) { 
        var reader = new FileReader(); 

        reader.onload = function(e) { 
         var image = document.getElementById("myImage"); 
         image.src = e.target.result; 

         var content = document.getElementById("base64Content"); 
         content.innerHTML = e.target.result; 
        }; 

        reader.readAsDataURL(input.files[0]); 
       } 
      } 

      window.onload = function() { 
       document.getElementById("myFile") 
        .addEventListener("change", readFile); 
      } 
     </script> 
    </head> 
    <body> 
     <input id="myFile" type='file' accept='image/*'> 
     <p id="base64Content"></p> 
     <img id="myImage" height="150"> 
    </body> 
</html>

出典

2017-01-27 03:04:20

imgのbase64コンテンツを取得する方法

答えて

関連する問題