Div入力へのファイル入力の委任に関する問題

Question

このスニペットを見て、FileUploadをdivに委任できない理由を教えてください。私はをクリックして元の入力および負荷の画像を非表示に加えて、あなたがinput[type=image]使う代わりに

$('.img-box').click(function(e) { 
 
    console.log("Test"); 
 
    e.stopPropagation(); 
 
$(this).find('input[name="image"]').click(); 
 
});

.img-box{ 
 
    min-height:100px; 
 
    min-width:100px; 
 
    background-image: url("https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/07_plus-128.png"); 
 
    margin: 0 auto; 
 
    background-size: 40px 40px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
input { 
 
    display:none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-6 col-md-3 text-center"> 
 
    <a href="#" class="thumbnail "> 
 
     <div class="img-box"> 
 
    <input type="file" class="file" name="image" /> 
 
<img id="i" class="img-responsive" /> 
 
     
 
     </div> 
 
    </a> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

署名するが、それはあなたが使用する必要がありtype=fileと

$(this).find('input[type="image"]').click(); 

name=imageです

$(this).find('input[name="image"]').click();