获取图像供以后使用

【问题标题】：Getting Image For Later Use获取图像供以后使用
【发布时间】：2023-04-04 07:14:01
【问题描述】：

我正在建立一个网站，用户可以在其中上传图片，然后将其显示。稍后我需要将此图像设置为他们的个人资料图片，而我对如何执行此操作一无所知。谢谢你！这是我的代码：

<input id="inp" type='file' accept="image/*"onchange="readURL(this);" /><br>
<img id="blah"/>

<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#blah')
            .attr('src', e.target.result)
            .width(150)
            .height(150);
    };

    reader.readAsDataURL(input.files[0]);
}
}
</script>

【问题讨论】：

我想您会想要保留该图像设置？这意味着您必须将图像上传到服务器，以便在后续请求中显示。

标签： javascript html css twitter-bootstrap

【解决方案1】：

我不太明白您的问题，您可以将数据保存在一个变量中，然后在必须发布图像时使用该变量，您应该避免将图像直接存储在数据库中，而是存储对它们的引用。

但如果你想在选择后简单地显示图像，你可以这样做：

let input = $('input'),
    img = $('img'),
    reader = new FileReader();

function readFile(e) {
  reader.onload = function(e) {
    img.attr('src', e.target.result)
  }
  
  reader.readAsDataURL(e.target.files[0])
}

input.on('change', readFile)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inp" type='file' accept="image/*"/>
<img/>

但是，如果您想将图像永久保存在数据库中，您将必须了解后端的工作原理，并且可能需要设置一个 Restful API。

【讨论】：