php网页弹出图片,商城网站是如何单击头像直接弹出可以上传图片然后预览？

正好做了一个，和题主这个想要的效果差不多，用到了File API，旧浏览器兼容不了，题主可以参考一下。

html

x

css

.file-selector {

position: relative;

overflow: hidden;

display: inline-block;

width: 120px;

height: 160px;

border: 3px dashed #e7e7eb;

margin-right: 20px;

&:hover {

border-color: #888;

.am-icon-upload {

color: #888;

}

}

&.has-preview {

border: 0;

.am-icon-upload,

input {

display: none;

}

}

.am-icon-upload {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 48px;

color: #e7e7eb;

}

.preview-container {

width: 100%;

height: 100%;

display: none;

position: relative;

img {

width: 100%;

height: 100%;

}

.remove-button {

top: 0;

right: 0;

}

}

input {

position: absolute;

top: 0;

right: 0;

margin: 0;

opacity: 0;

font-size: 200px;

direction: ltr;

cursor: pointer;

}

}

js

$('#js-image').on('change', function() {

var $input = $(this);

var $container = $input.closest('.file-selector');

var $previewContainer = $container.find('.preview-container');

var $previewImage = $previewContainer.find('.js-preview');

var reader = new FileReader();

reader.onload = function(e) {

$previewImage.attr('src', e.target.result);

$container.addClass('has-preview');

$previewContainer.show();

$previewContainer.find('.js-remove-image').on('click', function() {

$input.val(null);

$previewImage.attr('src', null);

$container.removeClass('has-preview');

$previewContainer.hide();

$(this).off('click');

});

}

reader.readAsDataURL(this.files[0]);

});