imageUpdate.js
4.94 KB
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
$(function () {
//元素
var oFileInput = $("#fileInput"); //选择文件按钮
var oFileSpan = $("#fileSpan"); //选择文件框
var oFileList_parent = $(".fileList_parent"); //表格
var fileListName = $('.fileListName') //上传的数据列表
var oFileList = $(".fileList"); //表格tbody
var sizeObj = []; //存放每个文件大小的数组，用来比较去重
//拖拽外部文件，进入目标元素触发
oFileSpan.on("dragenter", function () {
$(this).find('.file_name').css("background", "#ccc");
$(this).find('.file_name').empty();
$(this).find('.file_name').append(
'<p style="line-height:200px">可以方鼠标了</p>'
)
});
//拖拽外部文件，进入目标、离开目标之间，连续触发
oFileSpan.on("dragover", function () {
return false;
});
//拖拽外部文件，离开目标元素触发
oFileSpan.on("dragleave", function () {
$(this).find('.file_name').empty();
$(this).find('.file_name').css("background", "#ffff");
$(this).find('.file_name').append(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">登记申请书（2份）</div>' +
'<div class="fileListName"></div>'
)
});
//拖拽外部文件，在目标元素上释放鼠标触发
oFileSpan.on("drop", function (ev) {
var fs = ev.originalEvent.dataTransfer.files;
$(this).find('.file_name').empty();
$(this).find('.file_name').css("background", "#ffff");
$(this).find('.file_name').append(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">登记申请书（2份）</div>' +
'<div class="fileListName"></div>'
)
analysisList(fs); //解析列表函数
return false;
});
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
})
//解析列表函数
function analysisList(obj) {
//如果没有文件
if (obj.length < 1) {
return false;
}
for (var i = 0; i < obj.length; i++) {
var fileObj = obj[i]; //单个文件
var name = fileObj.name; //文件名
var size = fileObj.size; //文件大小
var type = fileType(name); //文件类型，获取的是文件的后缀
//文件大于30M，就不上传
if (size > 1024 * 1024 * 1024 || size == 0) {
layer.msg('超过了30M，不能上传', { icon: 5 });
return false;
}
//把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
if (sizeObj.indexOf(size) != -1) {
layer.msg('已经选择，不能重复上传', { icon: 5 });
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
flieList.push(itemArr);
//把这个文件的大小放进数组中
sizeObj.push(size);
}
createList() //生成列表
document.querySelector('#fileInput').value = null
if (flieList.length == 2) {
oFileList_parent.show(); //表格显示
}
};
//生成列表
function createList() {
oFileList.empty(); //先清空元素内容
for (var i = 0; i < flieList.length; i++) {
var fileData = flieList[i]; //flieList数组中的某一个
var name = fileData[1]; //文件名
var oTr = $("<tr></tr>");
var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
oTr.html(str);
oTr.appendTo(oFileList);
$('.fileListName').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
);
}
}
//删除表格行
oFileList.on("click", "a.operation", function () {
var oTr = $(this).parents("tr");
var index = oTr.index();
oTr.remove(); //删除这一行
flieList.splice(index, 1); //删除数据
sizeObj.splice(index, 1); //删除文件大小数组中的项
if (flieList.length == 0) {
oFileList_parent.hide()
$('.fileListName').empty();
}
});
})
//通过文件名，返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}