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

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

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

获取名称

Answer 2

您应该创建1个通用功能

function showThumb(event, appendTo)或者只是没有事件并附上您想要的每个按钮

角度隐藏上传并显示新上传和图片

2 个答案: