javascript - Angular隐藏上传并显示新上传的图片

Question

简介

我有 3 个上传按钮，它们隐藏刚刚使用的按钮，并提供使用新按钮上传新图片的选项(最多 3 个上传按钮)。

我还有一个小的 JavaScript 函数，可以显示所选的图像(当前只有第一个按钮)

问题

如何在不重复代码的情况下将其他两个图像添加到此脚本中，还有没有办法显示文件名而不是图像本身？

我的代码

    <script>
    document.getElementById("FirstImageID").onchange = function () {
        var reader = new FileReader();

        reader.onload = function (e) {
            // get loaded data and render thumbnail.
            document.getElementById("image").src = e.target.result;
        };

        // read the image file as a data URL.
        reader.readAsDataURL(this.files[0]);
    };
</script>


<div class="text-center">
    <h1 style=" color: blue;">What would you like to do?</h1>
</div>

<div class="form-group" ng-controller="mock-up-makerController">


    <div class="controls row center-text">
        <input type="file" id="FirstImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageFirst()"
               ng-click=" showDiv1=true"
               ng-show="!showDiv1"/>

        <!--<input type="file" id="files" />-->


        <div ng-show="showDiv1">
            <input type="file" id="SecondImageID" name="image" class="" accept="image/*"
                   onchange="angular.element(this).scope().insertImageSecond()"
                   ng-click=" showDiv2=true"
                   ng-show="!showDiv2"/>
        </div>

        <div ng-show="showDiv2">
        <input type="file" id="ThirdImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageThird()"/>
        </div>
    </div>

    <img id="image" />

</div>

Answer 1

首先，这里的问题是您一次将一个事件绑定(bind)到每个输入。您正在使用 javascript 事件处理程序，并将其附加到 HTML 中。我建议你坚持使用 html。您可以将事件传递给该事件处理程序。

onchange="onInputUploadChange(evt)"

您可以在您的函数中接受它并确定正在使用哪个。

function onInputUploadChange(evt){
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };
    //get the file from event, if not possible, try THIS
    //This will only work if you have no multiselect which I'm assuming is true.
    var file = evt.target.files[0] ? evt.target.files[0] : $(this)[0].files[0];
    // read the image file as a data URL.
    reader.readAsDataURL();
}

至于你的另一个问题，你可以从file.fileName获取名称