imageUpdate3.js
4.7 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
$(function () {
//元素
var oFileInput3 = $("#fileInput3"); //选择文件按钮
var sizeObj3 = []; //存放每个文件大小的数组，用来比较去重
// var oFileSpan = $("#fileSpan");
// //拖拽外部文件，进入目标元素触发
// 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:240px">可以方鼠标了</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(
// '<img class="update" src="../staticImages/update.png">'+
// '<p class="updatetext">点击或拖拽文件上传</p>'+
// '<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(
// '<img class="update" src="../staticImages/update.png">'+
// '<p class="updatetext">点击或拖拽文件上传</p>'+
// '<div class="fileListName"></div>'
// )
// analysisList(fs); //解析列表函数
// return false;
// });
//点击选择文件按钮选文件
oFileInput3.on("change", function () {
if(flieList3.length>=1) {
layer.msg('已经完成上传最大限度', { icon: 5 });
return false
}else {
analysisList(this.files, oFileInput3);
}
})
//解析列表函数
function analysisList(obj, inputName) {
//如果没有文件
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 (sizeObj3.indexOf(size) != -1) {
layer.msg('已经选择，不能重复上传', { icon: 5 });
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
flieList3.push(itemArr);
if (flieList3.length==1){
inputName.parent().find('.update').attr('src','../staticImages/Yes.png');
inputName.parent().find('.updatetext').text('')
}
//把这个文件的大小放进数组中
sizeObj3.push(size);
}
createList() //生成列表
document.querySelector('#fileInput1').value = null
};
//生成列表
function createList() {
$('.fileListName3').empty()
for (var i = 0; i < flieList3.length; i++) {
var fileData = flieList3[i];
name = fileData[1]
$('.fileListName3').append(
'<li class="fileName">'+
'<span title="' + name + '">' + name + '</span>' +
'<img class="operation" src="../staticImages/chacha.png">'+
'</li>'
);
}
}
$(document).on("click", ".fileListName3 .fileName .operation", function (e) {
var index = $(this).parent().index();
flieList3.splice(index, 1)
sizeObj3.splice(index, 1)
$(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../staticImages/update.png');
$(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
$(this).parent().remove()
})
})
//通过文件名，返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}