ssh框架的一个上传到服务器然后显示在页面上的小实例,用的是简单的form表单形式,数据包括图片的url地址保存在数据库中,图片上传到tomcat服务器下的项目文件夹里,然后页面展示图片, 算是好好把上传功能给过了一遍了,当然还有什么h5上传,分片上传等等这里就不提了,适用于初学上传文件的例子。
使用bootstrap fileinput.js上传控件,
github源码下载:https://github.com/kartik-v/b...
页面上需要引入的css和js
1
2
|
<link rel= "stylesheet" type= "text/css" href= "css/fileinput.min.css" rel= "external nofollow" > <script type= "text/javascript" src= "js/fileinput.min.js" ></script> |
效果还是不错的
页面代码(参考)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<form action= "uploadaction" method= "post" enctype= "multipart/form-data" id= "myform" > <!-- 图片标题 --> <input class = "form-control" type= "text" name= "img_title" id= "img_title" size= "100" value= "请输入图片名称" style= "color: #999999;" onfocus= 'if(this.value=="请输入图片名称"){this.value="";};' onblur= 'if(this.value==""){this.value="请输入图片名称";};' > <br /> <!-- 下拉框 --> <select name= "img_state" > <option selected= "selected" >请选择审核状态</option> <c:foreach items= "${statelist }" var= "sl" > <option value= "${sl.s_id }" >${sl.s_statename}</option> </c:foreach> </select> <br /> <br /> <!-- 图片上传控件 --> <input type= "file" name= "file" id= "file" class = "file" /> <br> </form> <center> <a href= "executeimages" rel= "external nofollow" class = "btn btn-success" >返回图集</a> </center> |
uploadaction(myeclipse的web-info下创建uploadfile文件夹)
这里没有用smartupload或者是别的上传jar包
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
|
package com.action; import java.io.file; import java.io.fileinputstream; import java.io.filenotfoundexception; import java.io.fileoutputstream; import java.io.ioexception; import java.io.inputstream; import java.io.outputstream; import java.util.list; import org.apache.struts2.servletactioncontext; import enity.cms_images; import enity.cms_state; import sql_implements.images_sql_implem; import com.opensymphony.xwork2.actionsupport; @suppresswarnings ( "serial" ) public class uploadaction extends actionsupport { /** * 这里集合形式输入到流,防止上传重复文件,减少服务器压力 */ private string img_title; // 图片标题 private int img_state; // 状态 // 上传文件存放路径 private final static string uploadaddres = "/uploadfile" ; // 上传文件集合泛型为file对象 private list<file> file; // 上传文件名集合 private list<string> filefilename; // 上传文件内容类型集合 private list<string> filecontenttype; cms_images images = new cms_images(); cms_state state = new cms_state(); // 实例状态类 private images_sql_implem isi; cms_imagesaction cia; public cms_imagesaction getcia() { return cia; } public void setcia(cms_imagesaction cia) { this .cia = cia; } public int getimg_state() { return img_state; } public void setimg_state( int img_state) { this .img_state = img_state; } public cms_state getstate() { return state; } public void setstate(cms_state state) { this .state = state; } public images_sql_implem getisi() { return isi; } public void setisi(images_sql_implem isi) { this .isi = isi; } public static string getuploadaddres() { return uploadaddres; } public cms_images getimages() { return images; } public void setimages(cms_images images) { this .images = images; } public string getimg_title() { return img_title; } public void setimg_title(string img_title) { this .img_title = img_title; } public list<file> getfile() { return file; } public void setfile(list<file> file) { this .file = file; } public list<string> getfilefilename() { return filefilename; } public void setfilefilename(list<string> filefilename) { this .filefilename = filefilename; } public list<string> getfilecontenttype() { return filecontenttype; } public void setfilecontenttype(list<string> filecontenttype) { this .filecontenttype = filecontenttype; } // 上传方法 public string execute() throws exception { // 打印文件名称 system.out.println( "文件名称:" + this .getfilefilename()); for ( int i = 0 ; i < file.size(); i++) { // 循环上传每个文件 uploadfile(i); } /** * 这里有bug 想每次添加完后能在查询一遍下拉框的值 */ // cia.execute(); return "uploadsuccess" ; } // 调用执行上传功能 @suppresswarnings ( "deprecation" ) public void uploadfile( int i) throws filenotfoundexception, ioexception { try { inputstream in = new fileinputstream(file.get(i)); // servletactioncontext对象响应获取实际文件地址,getrealpath已经废弃不推荐用了 string dir = servletactioncontext.getrequest().getrealpath( uploadaddres); system.out.println( "服务器路径:" + dir); // 获取文件名称 string filename = this .getfilefilename().get(i); // 路径和文件名丢进file对象里 file uploadfile = new file(dir, filename); // 输出流 outputstream out = new fileoutputstream(uploadfile); // 设置文件大小1mb byte [] buffer = new byte [ 1024 * 1024 ]; int length; // 用循环从流中读取文件的大小 while ((length = in.read(buffer)) > 0 ) { out.write(buffer, 0 , length); } // 设置图片标题和全路径 images.setimg_title(img_title); string imgurl = dir + "/" + filename; // 将全路径截取为相对路径 string strurl = imgurl.substring( 32 ); images.setimg_url(strurl); // 设置状态的id,并将id对象传入 state.sets_id(img_state); images.setimg_state(state); // 添加图片的信息 int num = isi.addimg(images); system.out.println( "是否上传了信息:" + num); // 关闭输入流输出流,释放内存 in.close(); out.close(); } catch (exception e) { e.printstacktrace(); } } } |
演示效果图
图片上传到了tomcat下的项目指定的文件夹里了
页面展示(这个部分就各有各有写法了)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://segmentfault.com/a/1190000011065239