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處理就可以了
例子 http://www.cnblogs.com/snandy/archive/2012/11/26/2789350.html

如果需要相容的話，可以嘗試下jQuery File Upload這個外掛程式

有好多種方法可以弄這個吧？js的onclick事件開啟上傳框，配合ajax上傳到伺服器然後再用ajax引入這張圖片，妥妥的。

