显示上传的图片而不是上传按钮

我有一个“按钮”（一个像按钮一样的锚点）。您可以在哪里上传获取预览的图片。显示上传的图片而不是上传按钮

但我想要做的是让上传的图片显示，而不是按钮（相同的大小等）。有没有这样做的好方法？

$(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>

来源

2017-04-16 vonhact

我这样做：

$(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>

来源

2017-04-16 13:21:31

我会在与此picure底部一些空白。 – vonhact

我编辑了我的答案。 –

如何使用图片作为通过$('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>

来源

2017-04-16 13:24:23

这将是我的做法，根据关你的解决方案。

$(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>

来源

2017-04-16 13:36:01

运行代码段时出现错误。你有包含jquery吗？ – vonhact

看起来不错。但是现在你不能上传另一张图片，如果你想改变它。 – vonhact

你原来的问题陈述“但我想要做的是让上传的图片显示INSTEAD按钮” –

创建一个片段。

将背景大小更改为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>

来源

2017-04-16 13:42:07 tfE

看起来不错，但它不显示整个图像。有没有办法做到这一点？ – vonhact

如果你需要图像的宽度和高度与按钮相同，那么由于图像可以有不同的比例，所以它会在没有背景大小的情况下变形。如果您只需要宽度相同，那么确保高度可以是自动的，而不是背景图像，您可以使用标签。 – tfE

将背景大小更改为100％100％以防万一它是所需的行为。 – tfE

显示上传的图片而不是上传按钮

回答

相关问题