アップロードボタンの代わりにアップロードされた画像を表示する

私は「ボタン」（ボタンのように機能するアンカー）を持っています。ここでプレビューされる画像をアップロードできます。アップロードボタンの代わりにアップロードされた画像を表示する

私がしたいのは、ボタン（同じサイズなど）の代わりにアップロードされた画像を表示させることです。これを行う良い方法はありますか？

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

オリジナルの質問では、 "ボタンの代わりにアップロードされた画像を表示させることをやりたいのです" –

。

目的の動作である場合に備えて、背景サイズを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

イメージがボタンと同じ幅と高さになる必要がある場合、イメージは異なる比率を持つことがあるので、background-size：coverなしで歪んでしまいます。同じ幅にする必要がある場合は、高さを自動にすることができ、背景画像の代わりにタグを使用することができます。 – tfE

目的の動作である場合に備えて、背景サイズを100％100％に変更しました。 – tfE

アップロードボタンの代わりにアップロードされた画像を表示する

答えて

関連する問題