如何存储已上传的图像。

Question

如何将要上传到输入类型文件的图像存储到变量中，然后在 DOM 中预览？如果这有助于回答，我正在使用 MEAN 堆栈。

            <form method="post">
                <label class="app-file-input button" flow-init>
                    <span>Upload</span>
                    <i class="icon-enter"></i>
                    <input type="file" flow-btn/>
                    <img flow-img="$flow.files[0]" />
                </label>
            </form>

我已经阅读过，一旦上传了图片，它就会存储在临时存储中。我如何访问它然后在上传之前预览图像？

干杯

Answer 1

您需要以 Angular 的方式进行...如果您尝试实现自己的解决方案，您可以使用以下简单代码：https://stackoverflow.com/a/31952876/407245

但是，如果我是你，我会使用类似 https://github.com/danialfarid/ng-file-upload 或 https://github.com/nervgh/angular-file-upload 的东西

Answer 2

这是我给你的：

请看下面的示例 JS 代码：

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

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

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



 $(document ).on('change','#imgInp' , function(){ readURL(this); });

以及相关的 HTML：

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

见DEMO

Referal