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

Question

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

但这是我的问题：

我制作了一个应用程序，您可以在其中编辑游戏问题。这些问题在服务器上。您下载一个问题，然后在本地对其进行编辑。在 session 的末尾，您上传了您的问题。这些问题还应包含图像。因此我制作了一个小表格，它将图像保存为 image-heap 作为 FormData-Object。此 Form-Data Object 正在保存到另一个 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
    });
}

object 中有更多数据，但为了简单起见，我删除了它。

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

现在我想在特定问题再次出现时显示此图像。我如何在不上传的情况下执行此操作？有没有办法显示 javascript-object 之外的图像？

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 示例。

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

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

How to display an image that hasn't been uploaded yet?

javascript

image