Html5+Mui前端框架,開發記錄（三）：七牛雲上傳圖片

時間 2019-11-25

標籤 html5+mui html mui 前端框架開發記錄七牛 7牛上傳圖片欄目 HTML 简体版

原文原文鏈接

1.Html界面：javascript

1 <div id="container">
2     <label>憑證：</label>
3         <div id="uploadImage" class="mui-btn" style="float: left; margin-top: 5px;text-align: center;padding:10px;width: 100px;">選擇圖片
4         </div>
5         <br/><br/> 
6     <div class="upload-progress" id="imgs" style=" margin-top: 5px;">
7          </div>
8 </div>

2.引用jscss

1 <script src="https://cdn.staticfile.org/plupload/2.1.9/plupload.full.min.js"></script>
2 <script src="js/qiniu.min.js"></script>

3.js上傳圖片：首先獲取Token值，必定是頁面開始加載就執行此代碼html

mui.ajax({
    url: getAddress() + '/api/Qiliu/get?jsoncallback=?',
    data: {},
    async: false,
    dataType: 'json',
    crossDomain: true, //強制使用5+跨域  
    type: 'get',
    timeout: 10000,
    success: function(data) 
              {
       token = data;                     
        ar uploader = Qiniu.uploader({                                                         
                 runtimes: 'html5,flash,html4', //上傳模式,依次退化             
                 browse_button: 'uploadImage', //上傳選擇的點選按鈕，**必需**                                                         
                 //uptoken_url: , //Ajax請求upToken的Url，**強烈建議設置**（服務端提供）                                                         
                 uptoken:token, //若未指定uptoken_url,則必須指定 uptoken ,uptoken由其餘程序生成                                                         
                 // unique_names: true, // 默認 false，key爲文件名。若開啓該選項，SDK爲自動生成上傳成功後的key（文件名）。                                                         
                 // save_key: true,   // 默認 false。若在服務端生成uptoken的上傳策略中指定了 `sava_key`，則開啓，SDK會忽略對key的處理                                                         
                 //domain: '', //bucket 域名，下載資源時用到，**必需**                                                         
                 get_new_uptoken: true, //設置上傳文件的時候是否每次都從新獲取新的token                                                         
                 container: 'container', //上傳區域DOM ID，默認是browser_button的父元素，                                                         
                 max_file_size: '100mb',           //最大文件體積限制                                                         
                 filters: {
                 mime_types: [               //文件類型過濾，這裏限制爲圖片類型
                {title: "Image files", extensions: "jpg,jpeg,gif,png"}
            ]
        },
                                                         
                 flash_swf_url: 'js/plupload/Moxie.swf', //引入flash,相對路徑                                             
                 max_retries: 3, //上傳失敗最大重試次數                                                         
                 dragdrop: true, //開啓可拖曳上傳                                                         
                 drop_element: 'container', //拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳                                                         
                 chunk_size: '4mb', //分塊上傳時，每片的體積                                                         
                 auto_start: true, //選擇文件後自動上傳，若關閉須要本身綁定事件觸發上傳
                 init: {                                                             
                 'FilesAdded': function(up, files) {                             
                       }                                                     
                  plupload.each(files, function(file) {
                  //                                                                      
                 // 文件添加進隊列後,處理相關的事情
                 //                                                                 
                 //                                                                      
                 if (!files.match(/.jpg|.gif|.png|.bmp/i)) { //判斷上傳文件格式   
                //                                                                                              
                return mui.alert("上傳的圖片格式不正確，請從新選擇！");
                //                                                                                          
                }
                //                                                             
               var s = document.getElementById('imgs');                                                                     
               s.innerHTML="";                                             
               fd="";                                                                                                                         
               });                                                             
                },                                                 
              'BeforeUpload': function(up, file) {                                                                 
              // 每一個文件上傳前,處理相關的事情                                     
              console.log("開始上傳以前");                                                             
               },                                                 
             'UploadProgress': function(up, file) {                                 
             console.log("上傳中");                                                                 
             // 每一個文件上傳時,處理相關的事情                             
              },                                     
              'FileUploaded': function(up, file, info) {                                                                 
               // 每一個文件上傳成功後,處理相關的事情                                                                 
               // 其中 info.response 是文件上傳成功後，服務端返回的 
              json，形式如                                                                 
           // {                                                                 
           //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",                                                                 
           //    "key": "gogopher.jpg"                                                                 
           //  }                                                                 
           //var domain = up.getOption('domain');                                     
           // var res = parseJSON(info.response);           var res = JSON.parse(info.response);},
           'Error': function(up, err, errTip) {     
           console.log('error============'+errTip);    
          //上傳出錯時,處理相關的事情 
              },                                                           
         'UploadComplete': function() {                                                             
         //隊列文件處理完畢後,處理相關的事情  },                           
          'Key': function(up, file) {
         // 若想在前端對每一個文件的key進行個性化處理，能夠配置該函數
         // 該配置必需要在 unique_names: false , save_key: false 時才生效
         var key =new Date().getTime();
         // do something with key here
         return key
                                }
                            }                                     
                  });
    }
});

4.顯示在當前頁前端

 1 function readFile(res) {
 2                 var s = document.getElementById('imgs');
 3                 result = '<div id="result" style="float:left;margin-left: 5px;"><img style="height: 100px; width:100px" src="' +
 4                         res + '" alt=""/></div>';
 5                         var input = document.getElementById("file_input");
 6                         div = document.createElement('div');
 7                         div.innerHTML = result;
 8                         s.appendChild(div);    
 9 
10             }

5.公衆號展現圖片html5

1）引用cssjava

1 <link rel="stylesheet" href="../css/imageview.css" />
2 <link rel="stylesheet" href="../css/mui.imageviewer.css" />

  1 .mui-preview-image.mui-fullscreen {
  2     position: fixed;
  3     z-index: 20;
  4     background-color: #000;
  5 }
  6 .mui-preview-header,
  7 .mui-preview-footer {
  8     position: absolute;
  9     width: 100%;
 10     left: 0;
 11     z-index: 10;
 12 }
 13 .mui-preview-header {
 14     height: 44px;
 15     top: 0;
 16 }
 17 .mui-preview-footer {
 18     height: 50px;
 19     bottom: 0px;
 20 }
 21 .mui-preview-header .mui-preview-indicator {
 22     display: block;
 23     line-height: 25px;
 24     color: #fff;
 25     text-align: center;
 26     margin: 15px auto 4;
 27     width: 70px;
 28     background-color: rgba(0, 0, 0, 0.4);
 29     border-radius: 12px;
 30     font-size: 16px;
 31 }
 32 .mui-preview-image {
 33     display: none;
 34     -webkit-animation-duration: 0.5s;
 35     animation-duration: 0.5s;
 36     -webkit-animation-fill-mode: both;
 37     animation-fill-mode: both;
 38 }
 39 .mui-preview-image.mui-preview-in {
 40     -webkit-animation-name: fadeIn;
 41     animation-name: fadeIn;
 42 }
 43 .mui-preview-image.mui-preview-out {
 44     background: none;
 45     -webkit-animation-name: fadeOut;
 46     animation-name: fadeOut;
 47 }
 48 .mui-preview-image.mui-preview-out .mui-preview-header,
 49 .mui-preview-image.mui-preview-out .mui-preview-footer {
 50     display: none;
 51 }
 52 .mui-zoom-scroller {
 53     position: absolute;
 54     display: -webkit-box;
 55     display: -webkit-flex;
 56     display: flex;
 57     -webkit-box-align: center;
 58     -webkit-align-items: center;
 59     align-items: center;
 60     -webkit-box-pack: center;
 61     -webkit-justify-content: center;
 62     justify-content: center;
 63     left: 0;
 64     right: 0;
 65     bottom: 0;
 66     top: 0;
 67     width: 100%;
 68     height: 100%;
 69     margin: 0;
 70     -webkit-backface-visibility: hidden;
 71 }
 72 .mui-zoom {
 73     -webkit-transform-style: preserve-3d;
 74     transform-style: preserve-3d;
 75 }
 76 .mui-slider .mui-slider-group .mui-slider-item img {
 77     width: auto;
 78     height: auto;
 79     max-width: 100%;
 80     max-height: 100%;
 81 }
 82 .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
 83     width: 100%;
 84 }
 85 .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
 86     display: inline-table;
 87 }
 88 .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
 89     display: table-cell;
 90     vertical-align: middle;
 91 }
 92 .mui-preview-loading {
 93     position: absolute;
 94     width: 100%;
 95     height: 100%;
 96     top: 0;
 97     left: 0;
 98     display: none;
 99 }
100 .mui-preview-loading.mui-active {
101     display: block;
102 }
103 .mui-preview-loading .mui-spinner-white {
104     position: absolute;
105     top: 50%;
106     left: 50%;
107     margin-left: -25px;
108     margin-top: -25px;
109     height: 50px;
110     width: 50px;
111 }
112 .mui-preview-image img.mui-transitioning {
113     -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
114     transition: transform 0.5s ease, opacity 0.5s ease;
115 }
116 @-webkit-keyframes fadeIn {
117     0% {
118         opacity: 0;
119     }
120     100% {
121         opacity: 1;
122     }
123 }
124 @keyframes fadeIn {
125     0% {
126         opacity: 0;
127     }
128     100% {
129         opacity: 1;
130     }
131 }
132 @-webkit-keyframes fadeOut {
133     0% {
134         opacity: 1;
135     }
136     100% {
137         opacity: 0;
138     }
139 }
140 @keyframes fadeOut {
141     0% {
142         opacity: 1;
143     }
144     100% {
145         opacity: 0;
146     }

2)引用jsandroid

1 <script type="text/javascript" src="../js/mui.imageViewer.js" ></script>
2 <script type="text/javascript" src="../js/mui.previewimage.js" ></script>
3 <script type="text/javascript" src="../js/mui.zoom.js" ></script>

3)htmlweb

1 <div class="mui-input-row" style="height: 350px;">
2     <label>圖片：</label>
3     <div class="upload-progress" id="imgs"></div>
4 </div>

4）jsajax

 1                     var s = document.getElementById('imgs');
 2                     var imgs=data[0].Pzimg;
 3                     var img =[];
 4                     img=imgs.split(',');
 5                     for(var i=0;i<img.length-1;i++){
 6                             result = '<div id="result" style="float:left;margin-top: 5px;"><img style="height: 100px; width:100px "  data-preview-src=""  data-preview-group="1"  src="' +
 7                         img[i] + '" alt=""/></div>';                        
 8                         div = document.createElement('div');
 9                         div.innerHTML = result;
10                     s.appendChild(div);