>백엔드 개발 >PHP 튜토리얼 >javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览?

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

WBOY
WBOY원래의
2016-06-06 20:24:431651검색

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.