javascript - 如何显示尚未上传的图片？

Question

首先我需要为我的英语道歉，我不是一个很好的演讲者。

但这是我的问题:

我制作了一个应用程序，您可以在其中编辑游戏的问题。这些问题都在服务器上。您下载一个问题并在本地进行编辑。在 session 结束时，您上传您的问题。 这些问题还应该包含图像。 因此，我制作了一个小表单，它将图像作为 FormData-Object 保存到图像堆中。 该表单数据对象正在保存到另一个对象中。

以下是我如何执行此操作的示例:

var formDataTemp = new FormData();
var qcid = // given Id

if($('#editImageFileInput')[0].files[0] != undefined) {
    formDataTemp.append("img", $('#editImageFileInput')[0].files[0]);

    questionImageCache.push({
        qcid: qcid, img: formDataTemp
    });
}

对象中有更多数据，但我将其删除以保持简单。

还有用户已下载的所有问题的列表。在那里他可以从一个问题切换到另一个问题。

现在我想在特定问题再次出现时显示此图像。我怎样才能在不上传的情况下做到这一点？有没有办法从 javascript 对象中显示图像？

Answer 1

我不知道您的代码到底是如何工作的，但这是您在上传图像之前使用 FileReader 显示图像的方式。

Javascript:

function loadImg(input) {
    if (!input.files || !input.files.length) return null;

    var fReader = new FileReader();
    var img = $('#placeholder');

    fReader.onload = function(e) {
        $(img).attr('src', e.target.result);

    };

    fReader.readAsDataURL(input.files[0]);
}

HTML:

 <input type='file' onchange="loadImg(this);" />
 <img id="placeholder" src="#" alt="your image" />

JSFiddle示例。

您可以从此代码片段中获取概念并将其应用到您自己的项目中:)