显示上传的图片而不是上传按钮
问题描述：
我有一个“按钮”（一个像按钮一样的锚点）。您可以在哪里上传获取预览的图片。显示上传的图片而不是上传按钮
但我想要做的是让上传的图片显示，而不是按钮（相同的大小等）。有没有这样做的好方法？
$(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;
\t display: inline-block;
}
#filebutton {
\t width: 100px;
\t height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
\t <title>for testing</title>
\t <script src="js/jquery-3.2.1.min.js"></script>
\t <script src="js/costum.js"></script>
\t <link rel="stylesheet" type="text/css" href="css/costum.css">
</head>
<body>
\t <div class="input">
\t \t <label for="fileInput">
\t \t \t <input type="file" id="fileInput" style="display: none;" />
\t \t \t <a style="display: block;" type="button" id="filebutton">Upload</a>
\t \t \t <img id="imageChosen">
\t \t </label> \t
\t </div>
</body>
</html>
答
我这样做：
$(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 {
\t display: inline-block;
}
#filebutton {
\t width: 100px;
\t height: 100px;
border-style: solid;
border-width: 5px;
}
#imageChosen{
\t width: 100px;
\t 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>
\t <title>for testing</title>
\t <script src="js/jquery-3.2.1.min.js"></script>
\t <script src="js/costum.js"></script>
\t <link rel="stylesheet" type="text/css" href="css/costum.css">
</head>
<body>
\t <div class="input">
\t \t <label for="fileInput">
\t \t \t <input type="file" id="fileInput" style="display: none;" />
\t \t \t <a style="display: block;" type="button" id="filebutton">Upload</a>
\t \t \t <img id="imageChosen" style="display:none;">
\t \t </label> \t
\t </div>
</body>
</html>
答
如何使用图片作为通过$('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>
答
这将是我的做法，根据关你的解决方案。
$(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>
答
创建一个片段。
将背景大小更改为100％100％以防万一它是所需的行为。
$(document).ready(function() {
\t \t var buttonWidth,
\t \t buttonHeight;
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
\t \t \t \t \t \t
if (typeof buttonWidth === 'undefined') {
\t buttonWidth = $('#filebutton').outerWidth();
}
if (typeof buttonHeight === 'undefined') {
\t buttonHeight = $('#filebutton').outerHeight();
}
reader.onload = function (event) {
\t \t var img = $('<div class="imageChosen"></div>');
img.css({
\t 'width': buttonWidth,
'height': buttonHeight,
'background': 'url(' + event.target.result + ') center top no-repeat',
//'background-size': 'cover'
'background-size': '100% 100%'
});
if ($('#filebutton').length) {
\t $('#filebutton').replaceWith(img);
} else {
\t $('.imageChosen').eq(0).replaceWith(img);
}
}
reader.readAsDataURL(input.files[0]);
}
}
$('#fileInput').change(function(){
readURL(this);
});
});div.input {
border-style: solid;
border-width: 5px;
\t display: inline-block;
}
#filebutton {
\t width: 100px;
\t height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
\t <title>for testing</title>
\t <script src="js/jquery-3.2.1.min.js"></script>
\t <script src="js/costum.js"></script>
\t <link rel="stylesheet" type="text/css" href="css/costum.css">
</head>
<body>
\t <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> \t
</div>
</body>
</html>
我会在与此picure底部一些空白。 – vonhact
我编辑了我的答案。 –