[英]save and upload data:image/jpeg;base64 string as a jpg file saying its too big
I have a page lets the user display a selected image to upload and it displays it in place to preview first.我有一个页面让用户显示要上传的选定图像,并将其显示在适当的位置以首先进行预览。 It reads it as readAsDataURL.
它将其读取为 readAsDataURL。 I can save the data to a text string and can upload it with getJSON or AJAX but keep getting errors saying its too big of a string?
我可以将数据保存到文本字符串中,并可以使用 getJSON 或 AJAX 上传它,但总是收到错误消息,说它的字符串太大? I have tried to upload it as a file but then lose the functionality of pre viewing the image first.
我曾尝试将其作为文件上传,但随后失去了先预览图像的功能。
I can resize the image and do what I need with it once uploaded in PHP but I can struggling to get any image over 5K to be accepted.一旦上传到 PHP 中,我可以调整图像大小并使用它做我需要的事情,但我很难让任何超过 5K 的图像被接受。
I have done a pen, https://codepen.io/julianchamberlain/pen/PoKLvqg我做过一支笔, https://codepen.io/julianchamberlain/pen/PoKLvqg
I have not used this before so i apologise if I have done something wrong or not explained it clear.我以前没有使用过这个,所以如果我做错了什么或没有解释清楚,我深表歉意。
I am loading an displaying image like so:我正在加载一个显示图像,如下所示:
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imagePreview').css('background-image', 'url('+e.target.result +')'); $('#imagePreview').hide(); $('#imagePreview').fadeIn(650); $('#new_img').val(e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imageUpload").change(function() { readURL(this); }); function saveimg(data) { var new_data={ new_img: data.new_img }; $.getJSON('upload.php', new_data); alert("uploaded");
body { background: whitesmoke; font-family: 'Open Sans', sans-serif; }.container { max-width: 960px; margin: 30px auto; padding: 20px; } h1 { font-size: 20px; text-align: center; margin: 20px 0 20px; } h1 small { display: block; font-size: 15px; padding-top: 8px; color: gray; }.avatar-upload { position: relative; max-width: 205px; margin: 50px auto; }.avatar-upload.avatar-edit { position: absolute; right: 12px; z-index: 1; top: 10px; }.avatar-upload.avatar-edit input { display: none; }.avatar-upload.avatar-edit input + label { display: inline-block; width: 34px; height: 34px; margin-bottom: 0; border-radius: 100%; background: #FFFFFF; border: 1px solid transparent; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); cursor: pointer; font-weight: normal; transition: all 0.2s ease-in-out; }.avatar-upload.avatar-edit input + label:hover { background: #f1f1f1; border-color: #d6d6d6; }.avatar-upload.avatar-edit input + label:after { content: "\f040"; font-family: 'FontAwesome'; color: #757575; position: absolute; top: 10px; left: 0; right: 0; text-align: center; margin: auto; }.avatar-upload.avatar-preview { width: 192px; height: 192px; position: relative; border-radius: 100%; border: 6px solid #F8F8F8; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); }.avatar-upload.avatar-preview > div { width: 100%; height: 100%; border-radius: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"> <script src="https://kit.fontawesome.com/788cff4036.js" crossorigin="anonymous"></script> <div class="container"> <h1>jQuery Image Upload <small>with preview</small> </h1> <div class="avatar-upload"> <div class="avatar-edit"> <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" /> <label for="imageUpload"></label> </div> <div class="avatar-preview"> <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);"> </div> </div> </div> </div> <input type='text' id='new_img' /> <button type="button" class="button" onclick=" var new_img = document.getElementById('new_img').value; var data={new_img: new_img}; saveimg(data); saveimg(data);">Save Image</button>
I am saving the data in a text input and adding a save button like:我将数据保存在文本输入中并添加一个保存按钮,例如:
<input type='text' id='new_img' />
<button type="button" class="button" onclick="
var new_img = document.getElementById('new_img').value;
var data={new_img : new_img}; saveimg(data);
saveimg(data);">Save Image</button>
and to send the data I am using this but I have also tried AJAX but get same or empty results.并发送我正在使用的数据,但我也尝试过 AJAX 但得到相同或空的结果。
function saveimg(data) {
var new_data={
new_img : data.new_img
};
$.getJSON('upload.php', new_data);
alert("uploaded");
}
The upload php is:上传的 php 为:
$new_img = $_GET["new_img"];
$data = $new_img;
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('img/operators/image.jpg', $data);
echo "done";
Thanks to Andreas,感谢安德烈亚斯,
I did it with a post instead like:我是用一个帖子来做的,比如:
$.ajax({
url: 'upload.php',
data: new_data,
type: 'POST',
success: function(data){
alert("UPLOADED");
}
});
Also changed the php file to POST instead of GET.还将 php 文件更改为 POST 而不是 GET。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.