简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

Angular2仿微信實作9張圖片上傳與預覽實例分享

小云云
發布： 2018-01-09 10:19:41
原創
1738 人瀏覽過

本文主要介紹了Angular2仿照微信UI實現9張圖片上傳和預覽的範例程式碼，非常具有實用價值，需要的朋友可以參考下，希望能幫助到大家。

這幾天做得最久的是仿照微信UI做的圖片上傳/顯示縮圖/預覽/刪除功能，要求圖片1--9張。以下來記錄如何實現微信的圖片預覽/刪除功能。

樣式--weui.css

樣式用的是微信官方ui，weui.min.css（生產環境下建議使用此壓縮版）。

下載地址weui.css/weui.min.css。

範例--weui.io

微信官方自帶了demo: weui.io。

主要步驟

在正式進入各個小功能的解說前，先上官方demo->weui.io查看圖片上傳組件的樣式以及原始碼.

官方ui顯示如下，圖片上傳的ui在Uploader中。

圖片上傳的原始碼從審查元素中可獲取，如下所示：


<p class="page uploader js_show">
  <p class="page__hd">
    <h1 class="page__title">Uploader</h1>
    <p class="page__desc">上传组件，一般配合<a class="link" href=" " rel="external nofollow" >组件Gallery</a >来使用。</p >
  </p>
  <p class="page__bd">
    <p class="weui-gallery" id="gallery" style="opacity: 0; display: none;">
      <span class="weui-gallery__img" id="galleryImg" style="background-image:url(./images/pic_160.png)"></span>
      <p class="weui-gallery__opr">
        <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="weui-gallery__del">
          <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a >
      </p>
    </p>

    <p class="weui-cells weui-cells_form">
      <p class="weui-cell">
        <p class="weui-cell__bd">
          <p class="weui-uploader">
            <p class="weui-uploader__hd">
              <p class="weui-uploader__title">图片上传</p >
              <p class="weui-uploader__info">0/2</p>
            </p>
            <p class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                  <p class="weui-uploader__file-content">
                    <i class="weui-icon-warn"></i>
                  </p>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                  <p class="weui-uploader__file-content">50%</p>
                </li>
              </ul>
              <p class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
              </p>
            </p>
          </p>
        </p>
      </p>
    </p>
  </p>
  <p class="page__ft j_bottom">
    <a href="javascript:home()" rel="external nofollow" >< img src="./images/icon_footer_link.png"></a >
  </p>
</p>
登入後複製

觀察上面的程式碼，外層樣式直接套用，核心功能塊如下：

圖片預覽/刪除部分：


<p class="weui-gallery" id="gallery">
 <!--显示预览-->
 <span class="weui-gallery__img" id="galleryImg"></span>
 <!--删除按钮-->
 <p class="weui-gallery__opr">
  <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="weui-gallery__del">
   <i class="weui-icon-delete weui-icon_gallery-delete"></i></a >
 </p>
</p>
图片缩略图列表部分：
 <ul class="weui-uploader__files" id="uploaderFiles">
  <!--每张图片是一个<li>标签-->
  <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
</ul>
登入後複製

有了上面的準備，下載就可以對功能進行實現了:

1. 圖片縮圖顯示

觀察源碼可知，每張圖片的縮略圖的程式碼結構如下：


<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
登入後複製

他將圖片的url直接放到了background-img:url()屬性中，樣式直接使用微信的官方ui的class。因此，我們可以做這樣操作：建立一個陣列存picturesUrl放圖片的url，用angular2的指令*ngFor根據陣列中的內容動態產生縮圖列表（注意picturesUrl中元素的格式為：url(圖片的url)） ：，圖片url數組中的每個元素依序存進中間變數img中，然後使用angular2指令[ngStyle]根據img的值產生預覽圖，主要程式碼如下：


<ul class="weui-uploader__files picture-preview" id="uploaderFiles" >
                <li *ngFor="let img of picturesUrl"
                  class="weui-uploader__file"
                  [ngStyle]="{&#39;background-image&#39;:img}">
                </li>
</ul>

<!--img实例-->
<!--&#39;url(http://upload-images.jianshu.io/upload_images/7166236-ed8a621900728c39.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)&#39;-->
登入後複製

在ts檔案中定義圖片數組並且給一定的模擬資料：


#
picturesUrl = [
  &#39;url(http://upload-images.jianshu.io/upload_images/7166236-40ed406c30ef20a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)&#39;,
  &#39;url(http://upload-images.jianshu.io/upload_images/7166236-d79762ed654342bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)&#39;,
  &#39;url(http://upload-images.jianshu.io/upload_images/7166236-64e1a458e5e29d59.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)&#39;,
  &#39;url(http://upload-images.jianshu.io/upload_images/7166236-9a267a540acb8688.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)&#39;,
  &#39;url(http://upload-images.jianshu.io/upload_images/7166236-283f5687cb73eea8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)&#39;,
 ]; //存储图片Url
 title = &#39;app&#39;;
 shown = false;  //是否显示预览，初始化为否
 selectImageUrl: string; //用于存放选中图片的url
登入後複製

2. 圖片預覽顯示與消失

此處圖片預覽使用原生自帶的方法，微信的做法應該是透過[ngStyle]來控制整個

樣式，而我採用了與生成縮圖相同的方法，用[ngStyle]指令以及*ngIf指令控制預覽圖的顯示，然後在預覽圖的範圍上綁定一個點擊事件(click)="touchEvent()"，用於監聽用戶的點擊，實現點擊退出預覽的功能。主要程式碼如下：

微信的做法（根據點擊頁面取得到的程式碼）：


<!--预览隐藏的样式-->
<p class="weui-gallery" id="gallery" style="opacity: 0; display: none;">
 
</p>

<!--预览显示的样式-->
<p class="weui-gallery" id="gallery" style="display: block; opacity: 1;">
 
</p>
登入後複製

我採用的做法： 


<p class="weui-gallery" id="gallery" style="display: block"
       *ngIf="shown">
      <span class="weui-gallery__img" (click)="touchEvent()" [ngStyle]="{&#39;background-image&#39;:selectImageUrl}"></span>
      <p class="weui-gallery__opr">
        <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" (click)="onDelete()" class="weui-gallery__del">
          <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a >
      </p>
</p>
登入後複製


//点击缩略图显示预览
 showPicture($event){
  console.log("$event.target.backgroundImage：" + $event.target.style.backgroundImage);
  this.selectImageUrl = $event.target.style.backgroundImage;
  this.shown = true;
 }

//点击屏幕退出预览
touchEvent(){
  this.shown = false;
 }
登入後複製

3. 圖片刪除

圖片刪除的主要程式碼嵌套在圖片預覽的程式碼區塊中，只要為刪除部分綁定一個點擊事件（(click)="onDelete()"），點擊時出發刪除並且退出預覽即可。 


onDelete(){
  if(isUndefined(this.selectImageUrl)){
   console.log("查看图片预览，图片url未定义，this.selectImageUrl：" + this.selectImageUrl);
   return;
  }
 //正则去除URL中的双引号
  this.selectImageUrl = this.selectImageUrl.replace(/"/g,"");
  console.log("(this.picturesUrl.indexOf(this.selectImageUrl):"+this.picturesUrl.indexOf(this.selectImageUrl));
  //判断图片URL是否存在
  if(this.picturesUrl.indexOf(this.selectImageUrl)!== -1){
   this.picturesUrl.splice(this.picturesUrl.indexOf(this.selectImageUrl) , 1);
   setTimeout(()=>{
     this.shown = false;
    },
    20);
  }else{
   console.log("删除图片出错，获取URL或URL格式出错出错：" + this.selectImageUrl )
  }
 }
登入後複製

效果如下：

顯示縮圖：

 

顯示預覽：

 

點選下方的刪除欄位：

#相關推薦：

ajax實作非同步檔案或圖片上傳功能實例分享

PHP利用iframe實作圖片上傳顯示

PHP實作微信小程序圖片上傳實例程式碼分享

以上是Angular2仿微信實作9張圖片上傳與預覽實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
上傳 預覽
來源：php.cn
上一篇：vue-cli 自訂指令directive 新增驗證滑桿詳解 下一篇：jQuery實作開啟網頁自動彈出遮罩層或點選彈出遮罩層功能實例分享
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
javascript - angular2 使用ng build --prod --aot打包之後，js還是很大，怎麼辦？ 使用angular2 打包編譯文件，生產環境aot編譯之後，js還是有1.6M 官方不是說可以減小到幾百k以內嗎？
來自於 2017-07-05 10:41:43
0
1
964
javascript - angular2 的依賴注入是如何實現的 http://www.alloyteam.com/2015... 這篇簡單講了angularjs依賴注入的原理，想知道ng2是如何實現依賴注入的？
來自於 2017-07-04 13:44:32
0
2
719
javascript - 有沒有基於angular2的highCharts？ 最近在做angular的項目，需要用到可視化的操作，正在對比highcharts和echarts。目前遇到的問題：在angular2中能不能使用highcharts，對highch...
來自於 2017-06-30 09:58:19
0
3
509
javascript - angular2 如何監聽windows resize？ 1.使用angular2 開發網頁，需要監聽windows 的 resize事件？我該如何操作呢？ 2.求大神指點！
來自於 2017-06-29 10:09:59
0
1
706
javascript - angular2如何雙向綁定多個checkbox？ 例如我又一個數組如下： {代碼...} html模板中{代碼...} 我蓋如何實現，選中其中一個checkbox後，能在div.youselect中顯示出我已經選中的內容，如果是多...
來自於 2017-06-26 10:55:43
0
2
783
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！