我已经编写了允许用户上传多个文件的代码:
<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/