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>
最佳答案
问题是您有重复的 ID，函数 imagepreview() 总是在上传图像时更新相同的 ID。要解决此问题，请为每个图像预览指定一个唯一的 ID，并在文件上传框中放置相同的对应标识，这样一个唯一的文件上传框将更新一个唯一的图像预览。
这是一个演示。我为预览和上传都提供了唯一 ID，然后在 imagepreview() 中解析上传框 ID 并将其添加到页面上更新的图像预览 ID。 http://codepen.io/anon/pen/apOyZB
关于javascript - 如何制作jquery多图预览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41516268/