我如何能够为此脚本添加添加多个图像的功能,如下所示。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h1>jQuery Uploads</h1>
<form id="form1" runat="server">
<input type="file" id="imgInp" />
<img id="target" src="#" alt="your image" />
<input type="file" id="imgLarge1" />
<img id="large1" src="#" alt="your image 1" />
<input type="file" id="imgLarge2" />
<img id="large2" src="#" alt="your image 2" />
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#target').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
</body>
</html>
我不知道在哪里修改jquery以允许多个图像。非常感谢任何帮助。
答案 0 :(得分:0)
稍微改变你的表格:
<form id="form1" runat="server">
<input type="file" class="file" id="1"/>
<img id="img1" src="#" alt="your image" />
<input type="file" class="file" id="2"/>
<img id="img2" src="#" alt="your image 1" />
<input type="file" class="file" id="3"/>
<img id="img3" src="#" alt="your image 2" />
</form>
并将javascript更改为
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img'+e.id).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".file").change(function(){
readURL(this);
});
答案 1 :(得分:0)
<h1>jQuery Uploads</h1>
<form id="form1" runat="server">
<input type="file" id="imgInp"/>
<img id="target_imgInp" src="#" alt="your image" class="thumb"/>
<input type="file" id="large1" />
<img id="target_large1" src="#" alt="your image 1" />
<input type="file" id="large2" />
<img id="target_large2" src="#" alt="your image 2" />
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#target_"+$(input).attr("id")).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("input[type=file]").change(function(){
readURL(this);
});
</script>