How retrieve the base64 content of an img

Question

I'm trying to do a form that submits a title, a small description, an image in base64 and a full description of a post. My problem is for the image, I don't know how to convert the image in jQuery 3.1.1 Here is my code :

 $(".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"> <label class="item item-input"> <input type="text" placeholder="Title" class="title"> </label> <label class="item item-input"> <input class="description" type="text" placeholder="Simple Description (max 60 caracters)" maxlength="60"> </label> <label class="item item-input"> <div> <span id='button_upload'>Image : </span> <input type='file' class="img"> </div> </label> <label class="item item-input"> <textarea placeholder="Full description" class="full"></textarea> </label> <div class="padding"> <button class="button button-block button-positive submit-btn"> Submit </button> </div> </div>

Answer 1

Please consider using 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
});
});

Answer 2

 $(".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"> <label class="item item-input"> <input type="text" placeholder="Title" class="title"> </label> <label class="item item-input"> <input class="description" type="text" placeholder="Simple Description (max 60 caracters)" maxlength="60"> </label> <label class="item item-input"> <div> <span id='button_upload'>Image : </span> <input type='file' class="img"> </div> </label> <label class="item item-input"> <textarea placeholder="Full description" class="full"></textarea> </label> <div class="padding"> <button class="button button-block button-positive submit-btn"> Submit </button> </div> </div>

Answer 3

You can use a FileReader .

Examples: here
Mozilla documentation: here

For instance:

<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>

How retrieve the base64 content of an img

Question

3 answers

solution1
2 ACCPTED 2017-01-27 02:46:08

solution2
0 2017-01-27 02:38:47

solution3
0 2017-01-27 03:04:20

How retrieve the base64 content of an img

Question

3 answers

solution1 2 ACCPTED 2017-01-27 02:46:08

solution2 0 2017-01-27 02:38:47

solution3 0 2017-01-27 03:04:20

solution1
2 ACCPTED 2017-01-27 02:46:08

solution2
0 2017-01-27 02:38:47

solution3
0 2017-01-27 03:04:20