Heim >Backend-Entwicklung >PHP-Tutorial >javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览?

javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览?

WBOY
WBOYOriginal
2016-06-06 20:24:431651Durchsuche

javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览?

我现在没思路,不知道是怎么弄出来。

回复内容:

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn