Html5+Mui前端框架,开发记录（三）：七牛云 上传图片

1.Html界面：

<div id="container">
    <label>凭证：</label>
        <div id="uploadImage" class="mui-btn" style="float: left; margin-top: 5px;text-align: center;padding:10px;width: 100px;">选择图片
        </div>
        <br/><br/> 
    <div class="upload-progress" id="imgs" style=" margin-top: 5px;">
         </div>
</div>                        

2.引用js

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

3.js上传图片：首先获取Token值，一定是页面开始加载就执行此代码

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.显示在当前页

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

            }

 

5.公众号展示图片

1）引用css

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

.mui-preview-image.mui-fullscreen {
    position: fixed;
    z-index: 20;
    background-color: #000;
}
.mui-preview-header,
.mui-preview-footer {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 10;
}
.mui-preview-header {
    height: 44px;
    top: 0;
}
.mui-preview-footer {
    height: 50px;
    bottom: 0px;
}
.mui-preview-header .mui-preview-indicator {
    display: block;
    line-height: 25px;
    color: #fff;
    text-align: center;
    margin: 15px auto 4;
    width: 70px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    font-size: 16px;
}
.mui-preview-image {
    display: none;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.mui-preview-image.mui-preview-in {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.mui-preview-image.mui-preview-out {
    background: none;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
.mui-preview-image.mui-preview-out .mui-preview-header,
.mui-preview-image.mui-preview-out .mui-preview-footer {
    display: none;
}
.mui-zoom-scroller {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-backface-visibility: hidden;
}
.mui-zoom {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.mui-slider .mui-slider-group .mui-slider-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
    width: 100%;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
    display: inline-table;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
    display: table-cell;
    vertical-align: middle;
}
.mui-preview-loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}
.mui-preview-loading.mui-active {
    display: block;
}
.mui-preview-loading .mui-spinner-white {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    height: 50px;
    width: 50px;
}
.mui-preview-image img.mui-transitioning {
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }

 

2)引用js

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

3)html

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

4）js

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