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

如何存储已上载的图像。

2 个答案: