我有一个Javascript,用于预览需要上传的图片。但问题是它只适用于第一个选择的图像,而不适用于需要上传的其他图像。以下是图片上传和预览的代码。
<form id='uploadForm-<?php echo $imgCnt; ?>' action = '' enctype='multipart/form-data' method = 'POST' class="form<?php echo $imgCnt; ?>">
<input type="file" class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<input type="file" class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<input type="file" class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<input type="file" class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<input type="file" class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<img id="blah" src="#" alt="your image" /><br/><br/>
<input type='button' id = '<?php echo $imgCnt; ?>' class='uploadPicture<?php echo $imgCnt; ?> btn btn-primary' value = '上載'>
<!-- <input type="button" value="上載" class="uploadPicture" id="upload_btn<?php echo $imgCnt; ?>"/> -->
</form>
以下是 readURL 函数的Javascript,名为 onChange
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//$('#blah').attr('src', e.target.result).width(300).height(340);
$(input).next('img').attr('src', e.target.result).width(300).height(340);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
任何线索如何实现此功能。