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

<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';"


此代码将显示替代图像。

最佳答案

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]);
        }
    }

关于javascript - 使用相同的javascript函数更改多张图片上传的预览,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44897556/

10-11 23:02
查看更多