index.jsp
9.75 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<%-- <%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<script type="text/javascript" src="<%=basePath%>js/jquery.js" charset="utf-8"></script>
<style>
html,body{text-align:center;margin:0px auto;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#select").change(function(){
var value = $('#select option:selected') .val();
debugger;
if(value == '0'){
$("#form").attr('action','<%=basePath%>oss/uploadImage');
}else if(value == '1'){
$("#form").attr('action','<%=basePath%>oss/uploadHeadImage');
}else if(value == '2'){
$("#form").attr('action','<%=basePath%>oss/uploadAudio');
}else if(value == '3'){
$("#form").attr('action','<%=basePath%>oss/uploadVideo');
}
});
});
</script>
</head>
<body>
<div style="width:auto;height:20;margin-left:auto;margin-left:auto;">
${msg}
</div>
<form name="form" id="form" aligin="ceter" action="<%=basePath%>oss/uploadImage" enctype="multipart/form-data" method="post"">
<div id="newUpload2">
<select id="select">
<option value ="0">图片</option>
<option value ="1">头像</option>
<option value="2">音频</option>
<option value="3">视频</option>
</select>
<input type="file" name="fileUpload">
</div>
<input type="submit" value="上传" >
</form>
</body>
</html> --%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<script type="text/javascript" src="<%=basePath%>js/jquery.js"
charset="utf-8"></script>
<title>搜索词自动完成</title>
<style type="text/css">
#search {
text-align: center;
position: relative;
}
.autocomplete {
border: 1px solid #9ACCFB;
background-color: white;
text-align: left;
}
.autocomplete li {
list-style-type: none;
}
.clickable {
cursor: default;
}
.highlight {
background-color: #9ACCFB;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
sendxml();
});
function sendxml(){
var xmlData = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><book><name>王森勇</name><author>tiger</author></book>";
var url = "<%=basePath%>bookInfo/sendxml";
$.ajax({
type: 'POST',
url: url ,
data: xmlData ,
dataType:"xml",
'success': function (data) {
alert(data);
} ,
'error': function (reslut) {
alert(reslut);
},
contentType:"application/xml"
});
}
$(function(){
//取得div层
var $search = $('#search');
//取得输入框JQuery对象
var $searchInput = $search.find('#search-text');
//关闭浏览器提供给输入框的自动完成
$searchInput.attr('autocomplete','off');
//创建自动完成的下拉列表,用于显示服务器返回的数据,插入在搜索按钮的后面,等显示的时候再调整位置
var $autocomplete = $('<div class="autocomplete"></div>').hide().insertAfter('#submit');
//清空下拉列表的内容并且隐藏下拉列表区
var clear = function(){
$autocomplete.empty().hide();
};
//注册事件,当输入框失去焦点的时候清空下拉列表并隐藏
$searchInput.blur(function(){
setTimeout(clear,500);
});
//下拉列表中高亮的项目的索引,当显示下拉列表项的时候,移动鼠标或者键盘的上下键就会移动高亮的项目,想百度搜索那样
var selectedItem = null;
//timeout的ID
var timeoutid = null;
//设置下拉项的高亮背景
var setSelectedItem = function(item){
//更新索引变量
selectedItem = item ;
//按上下键是循环显示的,小于0就置成最大的值,大于最大值就置成0
if(selectedItem < 0){
selectedItem = $autocomplete.find('li').length - 1;
}
else if(selectedItem > $autocomplete.find('li').length-1 ) {
selectedItem = 0;
}
//首先移除其他列表项的高亮背景,然后再高亮当前索引的背景
$autocomplete.find('li').removeClass('highlight')
.eq(selectedItem).addClass('highlight');
};
var ajax_request = function(){
//ajax服务端通信
$.ajax({
'url':'<%=basePath%>oss/datas', //服务器的地址
'data' : {
'search-text' : $searchInput.val()
}, //参数
'dataType' : 'json', //返回数据类型
'type' : 'POST', //请求类型
'success' : function(data) {
if (data.length) {
$autocomplete.empty();
//遍历data,添加到自动完成区
$.each(data, function(index, term) {
//创建li标签,添加到下拉列表中
$('<li></li>').text(term).appendTo($autocomplete)
.addClass('clickable').hover(
function() {
//下拉列表每一项的事件,鼠标移进去的操作
$(this).siblings().removeClass(
'highlight');
$(this).addClass('highlight');
selectedItem = index;
},
function() {
//下拉列表每一项的事件,鼠标离开的操作
$(this).removeClass('highlight');
//当鼠标离开时索引置-1,当作标记
selectedItem = -1;
}).click(function() {
//鼠标单击下拉列表的这一项的话,就将这一项的值添加到输入框中
$searchInput.val(term);
//清空并隐藏下拉列表
$autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置,然后显示下拉列表
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width', );
$autocomplete.css({
'position' : 'relative',
'left' : xpos + "px",
'top' : ypos + "px"
});
setSelectedItem(0);
//显示下拉列表
$autocomplete.show();
}
}
});
};
//对输入框进行事件注册
$searchInput
.keyup(
function(event) {
//字母数字,退格,空格
if (event.keyCode > 40 || event.keyCode == 8
|| event.keyCode == 32) {
//首先删除下拉列表中的信息
$autocomplete.empty().hide();
clearTimeout(timeoutid);
timeoutid = setTimeout(ajax_request, 100);
} else if (event.keyCode == 38) {
//上
//selectedItem = -1 代表鼠标离开
if (selectedItem == -1) {
setSelectedItem($autocomplete.find('li').length - 1);
} else {
//索引减1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
} else if (event.keyCode == 40) {
//下
//selectedItem = -1 代表鼠标离开
if (selectedItem == -1) {
setSelectedItem(0);
} else {
//索引加1
setSelectedItem(selectedItem + 1);
}
event.preventDefault();
}
}).keypress(
function(event) {
//enter键
if (event.keyCode == 13) {
//列表为空或者鼠标离开导致当前没有索引值
if ($autocomplete.find('li').length == 0
|| selectedItem == -1) {
return;
}
$searchInput.val($autocomplete.find('li').eq(
selectedItem).text());
$autocomplete.empty().hide();
event.preventDefault();
}
}).keydown(function(event) {
//esc键
if (event.keyCode == 27) {
$autocomplete.empty().hide();
event.preventDefault();
}
});
//注册窗口大小改变的事件,重新调整下拉列表的位置
$(window).resize(function() {
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width', $searchInput.css('width'));
$autocomplete.css({
'position' : 'relative',
'left' : xpos+2 + "px",
'top' : ypos + "px"
});
});
});
function fileUpload() {
var fileName = $("#upfile").val();
if (fileName == null || fileName == "") {
alert("请选择文件");
} else {
debugger;
var fileType = fileName
.substr(fileName.length - 4, fileName.length);
if (fileType == ".xls" || fileType == "xlsx") {
var formData = new FormData();
formData.append("file", $("#upfile").prop("files")[0]);
$.ajax({
type : "post",
url : "<%=basePath%>exports/inLeadExcel",
data : formData,
cache : false,
processData : false,
contentType : false,
dataType : 'json', //返回数据类型
success : function(data) {
alert(data);
}
})
} else {
alert("导入文件类型错误!");
}
}
}
</script>
</head>
<body>
<div id="search">
<label for="search-text">请输入关键词</label><input type="text"
id="search-text" name="search-text" /> <input type="button"
id="submit" value="搜索" />
<a href="<%=basePath%>exports/printDeliveryDetail?sendId=FBC29053A90C489EBA544C57C06F77CF" target="_blank"><button type="button" class="ant-btn ant-btn-primary"><span>打 印</span></button></a>
<a href="<%=basePath%>exports/exportDeliveryDetail?sendId=FBC29053A90C489EBA544C57C06F77CF"><button type="button" class="ant-btn ant-btn-primary" style="margin-right: 8px;"><span>导 出</span></button></a>
<button type="button" class="ant-btn ant-btn-primary" style="margin-right: 8px;" onclick="$('#upfile').click();"><span>导 入</span></button>
<input type="file" class="file_input" id="upfile" onchange="fileUpload();" title=" " style="display:none">
</div>
</body>
</html>