admin 管理员组文章数量: 1184232
php点击头像上传图片,javascript
我现在没思路，不知道是怎么弄出来。
回复内容：
我现在没思路，不知道是怎么弄出来。
推荐 百度 FEX 团队的 Web Uploader，最近使用了一下，感觉功能比较全，可以实现分片、并发上传，同时上传前就可以获取到图片的预览图(大小可自己定义，是Base64编码)。另外除了对HTML5 File API 的支持外，还提供了Flash插件实现对老版本浏览器的支持。有兴趣可以阅读下官网的示例。
把做成透明度0，放在这个头像上，大小和这个头像一样
先写一个上传的input，然后隐藏掉，然后做一个按钮，或者div，给它onclick事件，当它被点击的时候去触发input，然后上传窗口就打开了。
预览功能是先把刚刚的图片传给服务器，然后拿到url，再用一个div来显示，就是预览了。如果这个时候要裁减什么的，就做完之后再传给服务器，把文件记录到数据库等等。
我自己的的做法是这样的。。
隐藏表单用ajax提交，不难。
正好做了一个，和题主这个想要的效果差不多，用到了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]);
});
我只知道HTML 5有办法可以预览
html5 fileapi change处理就可以了
例子 .html
如果需要兼容的话，可以尝试下jQuery File Upload这个插件
有好多种方法可以弄这个吧？js的onclick事件打开上传框，配合ajax上传到服务器然后再用ajax引入这张图片，妥妥的。
本文原创发布php中文网，转载请注明出处，感谢您的尊重！
本文标签： php点击头像上传图片 javascript
版权声明：本文标题：php点击头像上传图片,javascript 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1700279069a377172.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论