Heim >Backend-Entwicklung >PHP-Tutorial >javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览?
我现在没思路,不知道是怎么弄出来。
我现在没思路,不知道是怎么弄出来。
推荐 百度 FEX 团队的 Web Uploader,最近使用了一下,感觉功能比较全,可以实现分片、并发上传,同时上传前就可以获取到图片的预览图(大小可自己定义,是Base64
编码)。另外除了对HTML5 File API
的支持外,还提供了Flash
插件实现对老版本浏览器的支持。有兴趣可以阅读下官网的示例。
把做成透明度0,放在这个头像上,大小和这个头像一样
先写一个上传的input,然后隐藏掉,然后做一个按钮,或者div,给它onclick事件,当它被点击的时候去触发input,然后上传窗口就打开了。
预览功能是先把刚刚的图片传给服务器,然后拿到url,再用一个div来显示,就是预览了。如果这个时候要裁减什么的,就做完之后再传给服务器,把文件记录到数据库等等。
我自己的的做法是这样的。。
隐藏表单用ajax提交,不难。
正好做了一个,和题主这个想要的效果差不多,用到了File API
,旧浏览器兼容不了,题主可以参考一下。
html
<code class="html"><div class="file-selector"> <span class="icon-upload"></span> <div class="preview-container"> <div class="remove-button js-remove-image">x</div> <img class="js-preview" alt="javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览? " > </div> <input type="file" name="image" class="js-image"> </div></code>
css
<code class="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; } }</code>
js
<code class="javascript">$('#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]); });</code>
我只知道HTML 5有办法可以预览
html5 fileapi change处理就可以了
例子 http://www.cnblogs.com/snandy/archive/2012/11/26/2789350.html
如果需要兼容的话,可以尝试下jQuery File Upload这个插件
有好多种方法可以弄这个吧?js的onclick事件打开上传框,配合ajax上传到服务器然后再用ajax引入这张图片,妥妥的。