使用相同的 javascript 函数更改多个图像上传的预览答案

【问题标题】：Using same javascript function to change preview of multiple image upload使用相同的 javascript 函数更改多个图像上传的预览
【发布时间】：2017-07-04 13:42:09
【问题描述】：

我已经编写了允许用户上传多个文件上传的代码：

<asp:Image ID="image01" runat="server" Width="20%" onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"/>
                                        <asp:FileUpload ID="image01_update" runat="server" onchange="showPreview(this);"/>
                                        <asp:Image ID="image02" runat="server" Width="20%" onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"/>
                                        <asp:FileUpload ID="image02_update" runat="server" onchange="showPreview(this);"/>
                                        <asp:Image ID="image03" runat="server" Width="20%" onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"/>
                                        <asp:FileUpload ID="image03_update" runat="server" onchange="showPreview(this);"/>
                                        <asp:Image ID="image04" runat="server" Width="20%" onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"/>
                                        <asp:FileUpload ID="image04_update" runat="server" onchange="showPreview(this);"/>

显示上传图片预览的javascript函数如下：

function showPreview(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#image01').css('visibility', 'visible');
                $('#image01').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

目前预览仅适用于第一张图片上传，因为我正在传递 ID-#image01。

我想使用相同的 javascript 函数来显示所有四个图像上传器的预览。即，当我从#image01 上传第一张图片时，它必须显示它的预览，第二张它必须显示第二张图片的预览..等等......

注意：我在表单编辑模式下使用图片上传，如果没有上传图片，

onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"

此代码将显示备用图像。

【问题讨论】：

标签： javascript jquery file-upload

【解决方案1】：

function showPreview(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(input).prev().css('visibility', 'visible');
                $(input).prev().attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

【讨论】：

【解决方案2】：

你也可以像这样在按钮上使用“data-”属性。

HTML

<div>
    <div id="image01"></div>
    <button data-id="#image01" id="testBtn">Press me</button>
</div>

$(document).on('click', '#testBtn', function () {
        var id = $(this).data('id');
        $(id).text('testim');
    });

【讨论】：