Question

我正在尝试提交一个表单，提交标题，小描述，base64中的图像以及帖子的完整描述。我的问题是图像，我不知道如何转换 jQuery 3.1.1 中的图像这是我的代码：

$(".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

请考虑使用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

＆＃13;

$(".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]);
    }
  });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用 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>

如何检索img

3 个答案: