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

// https://stackoverflow.com/a/17711190/383904
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
https://stackoverflow.com/a/17711190/383904

获取图像并保存在存储中

1 个答案: