我是 php 和 jquery 的新手,我想在上传前预览图片,
这里我还添加了更多功能,如何在上传前预览所有图片
这是我的代码,我尝试并遵循了这个 url,但工作不正常。
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(function(){
$("#imgInp").change(function(){
readURL(this);
});
$("#add_field").click(function () {
$("#table_container").append($("#temp_div").html());
});
})
.image-upload > input
{
display: none;
}
.image-upload img
{
width: 50px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" enctype="multipart/form-data">
<table id="table_container">
<tr>
<th><label class="lbl-header">My Hobies</label></th>
<th><label class="lbl-header">Image</label></th>
</tr>
<tr>
<td><input type="text" name="hobies[]" value=""></td>
<td>
<div class="image-upload">
<label for="file-input">
<img src="upload.jpg"/>
</label>
<input id="file-input" id="imgInp" type="file" name="image[]" />
<img src="#" alt="image" id="blah">
</div>
</td>
</tr>
</table>
<input type="submit" name="submit" value="Submit">
</form>
感谢您的宝贵时间和帮助
最佳答案
它对第一个有效吗?
如果是,你的问题是在加载js时新的图片上传字段基本不存在,所以新字段没有考虑到变化。
其次,你使用一个 id 来做这件事,这是错误的,你只能有一个 id,所以你应该在一个类上使用你的改变。
关于jquery - 在 html 表格中上传之前无法预览图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52103113/