保存和上傳數據：image/jpeg;base64 字符串作為 jpg 文件說它太大

Question

我有一個頁面讓用戶顯示要上傳的選定圖像，並將其顯示在適當的位置以首先進行預覽。 它將其讀取為 readAsDataURL。 我可以將數據保存到文本字符串中，並可以使用 getJSON 或 AJAX 上傳它，但總是收到錯誤消息，說它的字符串太大？ 我曾嘗試將其作為文件上傳，但隨后失去了先預覽圖像的功能。

一旦上傳到 PHP 中，我可以調整圖像大小並使用它做我需要的事情，但我很難讓任何超過 5K 的圖像被接受。

我做過一支筆， https://codepen.io/julianchamberlain/pen/PoKLvqg

我以前沒有使用過這個，所以如果我做錯了什么或沒有解釋清楚，我深表歉意。

我正在加載一個顯示圖像，如下所示：

 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>

我將數據保存在文本輸入中並添加一個保存按鈕，例如：

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

並發送我正在使用的數據，但我也嘗試過 AJAX 但得到相同或空的結果。

function saveimg(data) {
    
    var new_data={ 
    new_img : data.new_img
    };
    
    $.getJSON('upload.php', new_data);
    alert("uploaded");
    
}

上傳的 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";

Answer 1

感謝安德烈亞斯，

我是用一個帖子來做的，比如：

 $.ajax({
            url: 'upload.php',
            data: new_data,                                                                                                  
            type: 'POST',
            success: function(data){
               alert("UPLOADED");
            }
        });

還將 php 文件更改為 POST 而不是 GET。