当前位置:Gxlcms > PHP教程 > javascript-商城网站是如何单击头像直接弹出可以上传图片然后预览?

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

时间:2021-07-01 10:21:17 帮助过:14人阅读

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

回复内容:

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

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

人气教程排行