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引入这张图片，妥妥的。