javascript – 作为文件上传的Div？

我只是想做一个上传或类似浏览div本身就像充当文件输入并触发其功能但我的问题是我是java脚本的新手,并且相当尴尬自己头脑风暴近一个小时并寻找互联网上的同样问题.

所以我没有别的选择,只能在这里提问

我的代码

 <script type="">
    	
    $('#pic1').click(function (Upload) {
     		$('#filetoUpload').click();
    });
    
    </script>

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

<div id="pic1" style="border:1px solid white;width:200px;height:150px;float:left;margin:10px;" onclick="Upload">
    					<input type="file" name="filetoUpload" id="filetoUpload" size="1" style="display:none;">
    					
    
    				</div>


<br> while my file input is hidden inside the div<br>

解决方法:

$(document).ready(function() {

    
    var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.profile-pic').attr('src', e.target.result);
            }
    
            reader.readAsDataURL(input.files[0]);
        }
    }
    

    $(".file-upload").on('change', function(){
        readURL(this);
    });
    
    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});

.upload-button {
    padding: 4px;
    border: 1px solid black;
    border-radius: 5px;
    display: block;
    float: left;
}

.profile-pic {
    max-width: 200px;
    max-height: 200px;
    display: block;
}

.file-upload {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" />
<div class="upload-button">Upload Image</div>
<input class="file-upload" type="file" accept="image/*"/>

此代码段特定于图像,其指定类似于accept =“image / *”/