如何使用输入上传图像，然后使用 img 标签呈现它的视图？答案

【问题标题】：How do you upload an image using input and then render a view of it with img tags?如何使用输入上传图像，然后使用 img 标签呈现它的视图？
【发布时间】：2015-03-13 23:33:46
【问题描述】：

我需要能够上传图像并将图像返回到屏幕以供查看，而不是使用输出标签，而是使用具有 src 元素的 img 标签。在我看过的其他教程中，让我失望的一件事是 # 登录作为 src 元素的占位符。我需要更多细节来实现它的这一部分。我从解决方案中将此引用到我无法实现的类似问题：HTML input type=file, get the image before submitting the form

我正在使用 Angular，但我不了解 jQuery，所以我宁愿避免使用 jQuery 解释。我正在使用以下代码上传和查看图像（如果以下代码包含 jQuery，我不会知道它，因为我只了解其中一部分；我为它找到了一个库，我一直在试图弄清楚它出）：

HTML：

<input type="file" id="files" name="files[]" file-model="myFile"/>
<output id="list" class="resize-image" alt="Image"></output>

Java脚本：

   var handleFileSelect = function (evt) {//already set up for multiple files; not what i want to do.
            var files = evt.target.files; // FileList object

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function(theFile) {
                    return function(e) {
                        // Render thumbnail.
                        var span = document.createElement('span');
                        span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }

        document.getElementById('files').addEventListener('change', handleFileSelect, false);

长话短说，我想让用户从桌面上传文件，查看上传的文件并裁剪图像以符合我的要求。我已经看到了很多库，但是如果不是在我的机器上，很多在演示中都有错误。其他人忽略了上述过程的一部分，我无法弥合差距。通过输入上传图像并将其作为带有“src”的图像显示到屏幕上的问题似乎是这个过程中的第一个绊脚石。

【问题讨论】：

标签： javascript html angularjs image

【解决方案1】：

这里有一个angular指令：http://ngmodules.org/modules/angular-file-upload可以处理文件上传。

它将文件路径作为字符串提供给您，您可以保存并绑定到图像标签的 ng-src 属性。您可以使用 ng-show 根据绑定到 ng-src 属性的变量的值来隐藏/显示图像。

确保使用 ng-src，而不是 src，否则将无法使绑定正常工作。

https://docs.angularjs.org/api/ng/directive/ngSrc

【讨论】：

【解决方案2】：

要上传文件但保持在同一页面上，您正在查看 AJAX。

您可以手动编码：（与您相关的示例）