之前公司的垃圾前端连这个都不会弄,直接自己动手,直接上代码
html
<div class="head-img">
<img src="照相机.png" id="my-img" style="width: 200px;height: 200px">
<input type="file" id="img-upload" accept="image/*" />
</div>
css
.head-img {
text-align: center;
position: relative;
}
#img-upload {
opacity: 0;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 50%;
margin-left: -100px;
}
js
$(document).ready(function() {
$(document).on('change', "#img-upload", function(event) {
var _file = $(this);
var _fileObj = _file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL = windowURL.createObjectURL(_fileObj.files[0]);
$(document).find('#my-img').attr('src', dataURL);
});
});