1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| /**
* uploader 上传组件
* @param {string} selector 上传组件的selector
* @param {object} options 配置项
* @param {string} [options.url] 上传的url，返回值需要使用json格式
* @param {boolean} [options.auto=true] 设置为`true`后，不需要手动调用上传，有文件选择即开始上传。用this.upload()来上传，详情请看example
* @param {string} [options.type=file] 上传类型, `file`为文件上传; `base64`为以base64上传
* @param {string=} [options.fileVal=file] 文件上传域的name
* @param {object=} [options.compress] 压缩配置, `false`则不压缩
* @param {number=} [options.compress.#uploaderCustom', {
auto: false,
type: 'file',
fileVal: 'customize_img',
compress: {
width: 1600,
height: 1600,
quality: 1
},
onBeforeQueued: function(files) {
// `this` 是轮询到的文件, `files` 是所有文件
if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) <0){
weui.alert('请上传图片');
return false; // 阻止文件添加
}
if(this.size > 10 * 1024 * 1024){
weui.alert('请上传不超过10M的图片');
return false;
}
if (files.length > 5) { // 防止一下子选择过多文件
weui.alert('最多只能上传1张图片，请重新选择');
return false;
}
if (uploadCount + 1 > 2) {
weui.alert('最多只能上传1张图片');
return false;
}
++uploadCount;
// return true; // 阻止默认行为，不插入预览图的框架
},
onQueued: function (){
console.log(this);
uploadCustomFileList.push(this);
// console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'
// console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64
// this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。
// this.stop(); // 中断上传
// return true; // 阻止默认行为，不显示预览图的图像
},
onBeforeSend: function(data, headers){
console.log(this, data, headers);
// $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
// $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
// return false; // 阻止文件上传
},
onProgress: function(procent){
console.log(this, procent);
// return true; // 阻止默认行为，不使用默认的进度显示
},
onSuccess: function (ret) {
console.log(this, ret);
// return true; // 阻止默认行为，不使用默认的成功态
},
onError: function(err){
console.log(this, err);
// return true; // 阻止默认行为，不使用默认的失败态
}
});
// 手动上传按钮
document.getElementById("uploaderCustomBtn").addEventListener('click', function () {
uploadCustomFileList.forEach(function (file) {
file.upload();
});
});
// 缩略图预览
document.querySelector('#uploaderCustomFiles').addEventListener('click', function (e) {
var target = e.target;
while (!target.classList.contains('weui-uploader__file') && target) {
target = target.parentNode;
}
if (!target) return;
var url = target.getAttribute('style') || '';
var id = target.getAttribute('id');
if (url) {
url = url.match(/url\((.*?)\)/)[1];
}
var gallery = weui.gallery(url, {
onDelete: function onDelete() {
weui.confirm('确定删除该图片？', function () {
var index;
for (var i = 0, len = uploadCustomFileList.length; i
var file = uploadCustomFileList[i];
if (file.id == id) {
index = i;
break;
}
}
if (index) uploadCustomFileList.splice(index, 1);
target.remove();
uploadCount = uploadCount-1;
gallery.hide();
});
}
});
}); |
京公网安备 11010802041100号