如何使用输入上传图像，然后使用img标记呈现图像视图？

Question

我需要能够上传一个图像，并将图像返回到屏幕上，不是使用输出标记，而是使用带有src元素的img标记查看。在我所见过的其他教程中，我遇到的一件事是#作为src元素的位置持有者登录。我需要更多的细节来实现这一部分。我从解决方案中引用了一个我无法实现的类似问题：HTML输入type=file，在提交表单之前获取图像

我使用的是角，我对jQuery一无所知，所以我倾向于避免使用jQuery解释。我使用以下代码上载和查看图像(如果下面的代码包括jQuery，我就不会知道它，因为我只了解其中的一些；我为它找到了一个库，我一直在试图找出它)：

HTML：

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

Javacript：

   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“的图像的问题似乎是此过程中的第一个绊脚石。

Answer 1

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

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

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

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

Answer 2

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

您可以手动编写代码：(一个与您相关的示例)

AJAX调用返回状态200，但不返回内容。

或者使用插件。我在无数的项目中都用过这个：

http://hayageek.com/docs/jquery-upload-file.php

关于AJAX工作原理的几个简单示例(jQuery示例，但原理相同--代码更容易遵循)：

一个简单的例子

更复杂的例子

根据下拉列表1中的选择填充下拉列表2

欲了解更多信息，只需在XMLHttpRequest上搜索

对于快速学习的jQuery，这里有优秀的(免费)视频教程：

9段10分钟的视频

200段10分钟的视频