1.Html界面：
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.引用js
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值，一定是页面开始加载就执行此代码
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）引用css
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)引用js
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)html
1 <div class="mui-input-row" style="height: 350px;"> 2 <label>图片：</label> 3 <div class="upload-progress" id="imgs"></div> 4 </div>
4）js
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] + ‘" /></div>‘;
8 div = document.createElement(‘div‘);
9 div.innerHTML = result;
10 s.appendChild(div);
原文地址：https://www.cnblogs.com/bonnie-w/p/10749270.html
时间： 2024-10-14 04:12:18