这是我的问题，我有这个小代码来显示img，而我无需重新加载即可上传LIVE，但它仅适用于一个img，因为readURL(input)它没有类，可以直接从noname-input进行操作，当我添加时一堂课readURL(input.joint)，它掉错了！这是我的代码：
<input class="joint" type='file' id="imgInp" />
<img style="width:45px" id="blah" src="#" alt="your image" />
<script type="text/javascript">
function readURL(input) {
if (input.filers && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
我需要向此jquery函数添加一些id或类，以使其对于每个输入都是唯一的。
我正在尝试做的是：
<input class="joint" type='file' id="imgInp" />
<img style="width:45px" id="blah" src="#" alt="your image" />
<script type="text/javascript">
function readURL(input.joint) {
if (input.joint.filers && input.joint.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.joint.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
<input class="file2" type='file' id="imgInp" />
<img style="width:45px" id="blah" src="#" alt="your image" />
<script type="text/javascript">
function readURL(input.file2) {
if (input.file2.filers && input.file2.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.file2.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
您在（imgInp和blah）处都有重复的ID ，因此选择器将仅选择第一个，最终您的事件仅绑定到第一个输入字段以及选择的内容$('#blah')。您需要选择相对于输入的相对图像。您也不必复制脚本。选择相对于输入的下一个图像标签，例如$(input).next('img').attr('src', e.target.result);
因此，请尝试：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(input).next('img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(function(){
$(".upld").change(function () { //set up a common class
readURL(this);
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句