我有一个＆＃34;按钮＆＃34; （一个像按钮一样的锚）。您可以在哪里上传预览的图片。
但我想要做的是让上传的图片显示而不是按钮（相同的大小等）。这样做有什么好办法吗？
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (event) {
$('#imageChosen').attr('src', event.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$('#fileInput').change(function(){
readURL(this);
});
});div.input {
border-style: solid;
border-width: 5px;
display: inline-block;
}
#filebutton {
width: 100px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>for testing</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/costum.js"></script>
<link rel="stylesheet" type="text/css" href="css/costum.css">
</head>
<body>
<div class="input">
<label for="fileInput">
<input type="file" id="fileInput" style="display: none;" />
<a style="display: block;" type="button" id="filebutton">Upload</a>
<img id="imageChosen">
</label>
</div>
</body>
</html>
答案 0 :(得分：0)
我会这样做：
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (event) {
$('#imageChosen').attr('src', event.target.result);
$("#imageChosen").show();
$("#fileInput").hide();
$("#filebutton").hide();
}
reader.readAsDataURL(input.files[0]);
}
}
$('#fileInput').change(function(){
readURL(this);
});
});div.input {
display: inline-block;
}
#filebutton {
width: 100px;
height: 100px;
border-style: solid;
border-width: 5px;
}
#imageChosen{
width: 100px;
height: 100px;
border-style: solid;
border-width: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>for testing</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/costum.js"></script>
<link rel="stylesheet" type="text/css" href="css/costum.css">
</head>
<body>
<div class="input">
<label for="fileInput">
<input type="file" id="fileInput" style="display: none;" />
<a style="display: block;" type="button" id="filebutton">Upload</a>
<img id="imageChosen" style="display:none;">
</label>
</div>
</body>
</html>
答案 1 :(得分：0)
如何通过$('div.input').css('background-image', 'url(' + event.target.result + ')')将图片用作背景？
然后，您可能希望将background-size设置为cover或contain。
示例：
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(event) {
$('div.input').css('background-image', 'url(' + event.target.result + ')');
}
reader.readAsDataURL(input.files[0]);
}
}
$('#fileInput').change(function() {
readURL(this);
});
});div.input {
border-style: solid;
border-width: 5px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#filebutton {
width: 100px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
<label for="fileInput">
<input type="file" id="fileInput" style="display: none;" />
<a style="display: block;" type="button" id="filebutton">Upload</a>
</label>
</div>
答案 2 :(得分：0)
根据您的解决方案，这将是我的方法
$(document).ready(function() {
var imgChosen = $('#imageChosen');
var inputElm = $('.input');
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(event) {
$('#imageChosen').attr('src', event.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$('#fileInput').change(function() {
readURL(this);
inputElm.hide();
imgChosen.fadeIn();
});
});#fileUploadWrapper {
display: relative;
}
div.input {
position: absolute;
border-style: solid;
border-width: 5px;
display: block;
width: 100px;
height: 100px;
}
#filebutton {
position: absolute;
display: block;
width: 100px;
height: 100px;
}
#imageChosen {
width: 100px;
height: 100px;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="fileUploadWrapper">
<div class="input">
<label for="fileInput">
<input type="file" id="fileInput" style="display: none;" />
<a id="filebutton">Upload</a>
</label>
</div>
<img id="imageChosen">
</div>
答案 3 :(得分：0)
创建了一个片段。
如果背景大小符合预期的行为，则将背景大小更改为100％。
$(document).ready(function() {
var buttonWidth,
buttonHeight;
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
if (typeof buttonWidth === 'undefined') {
buttonWidth = $('#filebutton').outerWidth();
}
if (typeof buttonHeight === 'undefined') {
buttonHeight = $('#filebutton').outerHeight();
}
reader.onload = function (event) {
var img = $('<div class="imageChosen"></div>');
img.css({
'width': buttonWidth,
'height': buttonHeight,
'background': 'url(' + event.target.result + ') center top no-repeat',
//'background-size': 'cover'
'background-size': '100% 100%'
});
if ($('#filebutton').length) {
$('#filebutton').replaceWith(img);
} else {
$('.imageChosen').eq(0).replaceWith(img);
}
}
reader.readAsDataURL(input.files[0]);
}
}
$('#fileInput').change(function(){
readURL(this);
});
});div.input {
border-style: solid;
border-width: 5px;
display: inline-block;
}
#filebutton {
width: 100px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>for testing</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/costum.js"></script>
<link rel="stylesheet" type="text/css" href="css/costum.css">
</head>
<body>
<div class="input">
<label for="fileInput">
<input type="file" id="fileInput" style="display: none;" />
<a style="display: block;" type="button" id="filebutton">Upload</a>
</label>
</div>
</body>
</html>