如何檢索img的base64內容
[英]How retrieve the base64 content of an img
問題描述
我正在嘗試做一個表單，用於提交標題，小描述， 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>
3 個解決方案
解決方案1
2 已采納 2017-01-27 02:46:08
請考慮使用FileReader.readAsDataURL（） https://developer.mozilla.org/zh-CN/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
});
});
解決方案2
0 2017-01-27 02:38:47
$(".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>
解決方案3
0 2017-01-27 03:04:20
您可以使用FileReader 。
例如：
<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>
如何刪除base64 img字符串
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.