Question

起初我需要为我的英语道歉，我不是一个好演讲者。

但这是我的问题：

我制作了一个应用程序，您可以在其中编辑游戏的问题。这些问题在服务器上。您下载了一个问题，并在本地进行了编辑。在会话结束时，您上传您的问题。这些问题还应包含图像。因此，我做了一个小形式，它将图像保存为图像堆作为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示例。

您可以从此代码段中获取概念并将其应用于您自己的项目：）

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

1 个答案: