我有2个不同的上传按钮,我需要通过这些按钮上传图像并将其渲染到div,单击“上传”按钮1可以渲染图像,但是单击“上传”按钮2则无法渲染图像
$(document).ready(function(e) {
$(".showonhover").click(function(){
$("#selectfile").trigger('click');
});
});
var input = document.querySelector('input[type=file]'); // see Example 4
input.onchange = function () {
var file = input.files[0];
drawOnCanvas(file); // see Example 6
displayAsImage(file); // see Example 7
};
function drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result,
c = document.querySelector('canvas'), // see Example 4
ctx = c.getContext('2d'),
img = new Image();
img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
};
img.src = dataURL;
};
reader.readAsDataURL(file);
}
function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('img');
img.onload = function() {
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
// document.body.removeChild(img);
document.getElementById("demo").appendChild(img);
}
function displayAsImage2(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('img');
img.onload = function() {
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
// document.body.removeChild(img);
document.getElementById("demo1").appendChild(img);
}
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
input {
font-size: 20px;
height:50px;
}
.imagediv {
float:left;
margin-top:50px;
}
.imagediv .showonhover{
background:red;
padding:20px;
opacity:0.9;
color:white;
width: 100%;
display:block;
text-align:center;
cursor:pointer;
}
#upfile1 {
background:red;
padding:20px;
opacity:0.9;
color:white;
width: 10%;
display:block;
text-align:center;
cursor:pointer;
}
#demo img,#demo1 img{
width:200px;
height:auto;
display:block;
margin-bottom:10px;
}
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>To an image "click on the image below"</h3>
<p>
<input type="file" id="file1" name="image" accept="image/*" capture style="display:none"/>
<span id="upfile1" style="cursor:pointer" />upload button1</span>
</p>
<p id="demo"></p>
<p id="demo1"></p>
<div align="left" class="imagediv">
<span>Or click here</span>
<span class="visibleimg"></span>
<span class="showonhover">upload button2</span>
<input id="selectfile" type="file" name="" style="display: none;" />
</div>
<script src="script.js"></script>
答案 0 :(得分:0)
我看到的主要问题是querySelector
仅返回“文档中与指定选择器匹配的 first 元素”。
由于有多个输入,我建议使用querySelectorAll
返回“与指定选择器组匹配的文档元素的列表”。
下面,我使用forEach
将onchange
侦听器绑定到每个输入。
// Code goes here
$(document).ready(function(e) {
$(".showonhover").click(function() {
$("#selectfile").trigger('click');
});
$("#upfile1").click(function() {
$("#file1").trigger('click');
});
});
var inputs = document.querySelectorAll('input[type=file]');
inputs.forEach(function(input) {
input.onchange = function() {
var file = this.files[0];
displayAsImage(file);
};
});
function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('img');
img.onload = function() {
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
document.getElementById("demo").appendChild(img);
}
/* Styles go here */
input {
font-size: 20px;
height: 50px;
}
.imagediv {
float: left;
margin-top: 50px;
}
.imagediv .showonhover {
background: red;
padding: 20px;
opacity: 0.9;
color: white;
width: 100%;
display: block;
text-align: center;
cursor: pointer;
}
#upfile1 {
background: red;
padding: 20px;
opacity: 0.9;
color: white;
width: 10%;
display: block;
text-align: center;
cursor: pointer;
}
#demo img,
#demo1 img {
width: 200px;
height: auto;
display: block;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>To an image "click on the image below"</h3>
<p>
<input type="file" id="file1" name="image" accept="image/*" capture style="display:none" />
<span id="upfile1" style="cursor:pointer">upload button1</span>
</p>
<p id="demo"></p>
<p id="demo1"></p>
<div align="left" class="imagediv">
<span>Or click here</span>
<span class="visibleimg"></span>
<span class="showonhover">upload button2</span>
<input id="selectfile" type="file" name="" style="display: none;" />
</div>
<script src="script.js"></script>