获取图像并保存在存储中

Question

我有一个网页，它是个人资料查看页面。这里我有一个空白图像。单击此图像后，我可以提示浏览图像选项。但我不知道如何将图像保存到存储器中。这是我的代码：

<div class="profileImage" >
    <ul>
        <li style="margin-top:5px;">  
            .Hii  
        </li>
        <li>
            <input type="file" id="my_file" style="display: none;" />
        </li>
        <li>
            <img id="fileupload" name="filetoupload" src="../../static/img/img.png">
        </li>
    </ul>
</div>

$(document).ready(function(){
    $("#fileupload").on("click", function() {
        $("#my_file").click();
    }

我在下面尝试了这个 jQuery 来保存图像，但是没有用。

$(document).ready(function(){
    $("#fileupload").on("click",function(){
        $("#my_file").click();
        userImage = document.getElementById('fileupload');
        imgData = getBase64Image(userImage);
        localStorage.setItem("imgData", imgData);
    });    
});

我的要求是我应该能够通过单击添加图像来保存图像，即我的代码中的 img.png。我正在使用 beego 作为 web 框架，但如果这个问题在 jQuery 或 javascript 中得到解决，我会很高兴。

Answer 1

jsBin demo

// 
function readImage() {
  if ( this.files && this.files[0] ) {
    var FR= new FileReader();
    FR.onload = function(e) {
      localStorage.setItem("imgData", event.target.result); // Send to Localstorage
    };       
    FR.readAsDataURL( this.files[0] );
  }
}

$(document).ready(function(){
  $("#fileupload").on("click",function(){
    $("#my_file").click().change( readImage );
  });   
});

要将该图像保存在服务器上，您需要将该数据发送到 PHP。
PHP 可以将您的 base64 字符串转换为图像。

否则，为什么不直接使用 AJAX 将图像发送到 PHP 脚本，然后将其放入服务器文件夹？

Send Image to server using File input type

获取图像并保存在存储中

Get image and save in storage

javascript

jquery

local-storage