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
var zhl_update_num = 10;
var index = 0;
$(function () {
// 上传数量控制，判断是否定义并赋值
zhl_update_num = typeof zhl_update_num != "undefined" && zhl_update_num ? zhl_update_num : 1;
// 上传大小控制，当前为1M
//var zhl_update_size = 1 * 1024 * 1024;
/**
* 文件选择触发
*/
$("#zhl_admin_file").change(function () {
var fileAll = this.files.length;
var uploaded_len = $('#zhl_admin_imgs>div>img').length;
var total_len = uploaded_len + fileAll;
if (total_len > zhl_update_num) {
alert('最多' + zhl_update_num + '张图片');
return false;
}
for (var i = 0; i < fileAll; i++) {
var file = this.files[i];
// if (file.size > zhl_update_size) {
// var d = parseInt(i + 1);
// alert("你选择的第" + d + "个文件太大了！");
// return false;
// }
if (!/image\/\w+/.test(file.type)) {
alert("文件必须为图片！");
return false;
}
var path = file.type;
var extStart = path.lastIndexOf('/');
var ext = path.substring(extStart, path.length).toUpperCase();
//判断图片格式
if (ext !== '/PNG' && ext !== '/JPG' && ext !== '/JPEG' && ext !== '/GIF') {
alert('请上传正确格式的图片(PNG/JPG/JPEG/GIF)');
return false;
}
var filename = this.files[i]['name']; //文件名称
var reader = new FileReader();
//读取文件过程方法
reader.onerror = function (e) {
console.log("文件读取异常....");
alert('文件上传异常请关闭重试....');
}
reader.onabort = function (e) {
console.log("文件读取异常....");
alert('文件上传异常请关闭重试....');
};
reader.onload = function (e) {
index++;
var json = '{"filesize":"' + file.size + '","filename":"' + filename + '","base64data":"' + e.target.result + '"}';
var imgstr = '';
imgstr += '<div id="div_' + index + '" style="position: relative;display: inline-block" >';
imgstr += '<img id="img_' + index + '" src="' + e.target.result + '" class="zhl_admin_update_imgtmp" />';
imgstr += '<input type="hidden" name="base64[]" value=' + json + '>';
imgstr += '<div onclick="deleteImg(' + index + ')" id="close_' + index + '" style="position:absolute; z-indent:2;right:5px;top:5px;"><img class="delete-img" src="images/delete.png" style="width: 25px;height: 25px"/>';
imgstr += '</div>';
//限制上传的图片数
var len = $('#zhl_admin_imgs>div>img').length;
if (len < zhl_update_num) {
if (len == zhl_update_num - 1) {
$('#zhl_admin_img').hide();
} else {
$('#zhl_admin_img').show();
}
$('#zhl_admin_imgs').append(imgstr);
} else {
alert('最多' + zhl_update_num + '张图片');
$('#zhl_admin_img').hide();
return false;
}
$(".uploaded-num").html(len + 1);
}
reader.readAsDataURL(file);
}
});
})
/**
* 点击删除预选的图片
*/
function deleteImg(i) {
v.$confirm('删除该张图片？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$("#div_" + i).remove();
$('#zhl_admin_img').show();
var len = $('#zhl_admin_imgs>div>img').length;
$(".uploaded-num").html(len);
v.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
v.$message({
type: 'info',
message: '已取消删除'
});
});
}