HTML5 - 保留 <img> 供以后使用

Question

我正在建立一个网站，用户可以上传图片，然后就会显示出来。稍后我需要将此图像设置为他们的个人资料图片。这是我的代码：

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

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