Question

这是jquery中的单个图片上传预览功能。我想分别更改每个框的多个功能，以上传您可以在下面的html脚本中看到的照片。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>

function imagepreview(input){
    if(input.files && input.files[0]){
        var filerd = new FileReader();
        filerd.onload=function(e){
            $('#imgpreview').attr('src', e.target.result);
        };
        filerd.readAsDataURL(input.files[0]);
    }
  }

</script>
<style>
body{
font-family:arial;
}
.wrap{
border:0px solid;
width:40%;
margin:10px auto;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align:center;
    padding:10px;
}
#idupload{
    display:none;
}
.input-label{
    background-color:#009688;
    color:#fff;
    padding:5px 15px;
}
</style>
</head>
<body>

<div class="wrap">
<table>
  <tr>
    <th><img id="imgpreview" src="" width="100" height="100"></th>
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    <th><img id="imgpreview" src="" width="100" height="100"></th>
  </tr>
  <tr>
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td>
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td>
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td>
  </tr>
</table>
</div>

</body>
</html>

Answer 1

问题是您有重复的ID，并且函数imagepreview()始终使用图片上传更新相同的ID。要解决此问题，请为每个图像预览指定一个唯一ID，并在文件上传框中放置相同的相应名称，以便唯一的文件上传框更新唯一的图像预览。

这是一个演示。我为预览和上传提供了唯一的ID，然后在imagepreview()我解析了上传框ID的ID，并将其添加到页面上更新的图像预览的ID中。 http://codepen.io/anon/pen/apOyZB

如何使jquery多个图像预览

1 个答案: