上传单文件到服务器
应公司要求,在HTML5页面上实现上传文件到服务器,对于一个还没毕业的实习生菜鸟来说,这可不得了-----不会,网上各种百度,找各种博客还是没解决,最后还是请教了公司的大神,人家给卸了一个例子,然后根据人家写的终于把这个上传文件搞定。
好了,开始上代码。
HTML5代码:
1
2
3
4
5
6
|
<form name= "upform" action= "" method= "POST" >
<input type = "file" name= "myfile1" id= "myfile1" /><br/>
<input type = "file" name= "myfile2" id= "myfile2" /><br/>
备注:<input type= "text" name= "mydata" id= "mydata" /><br/>
<input type= "button" value= "确定" onclick= "upload()" /><br/>
</form>
|
js代码:
FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,我们可以通过append向FormData里面添加各种需要提交的数据。
url:/adata/adata/payment/PaymentAction/upload.menu
----指的是你Java接受信息的action路径
_pathName=/adata//payment.jsp
-----------指的是你HTML5页面的虚拟路径。
alert(result);-------
指的是从Java后台返回的信息。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function upload() {
mydata = document.getElementById( "mydata" ).files[0];
formData = new FormData();
formData.append( "mydata" , mydata);
$.ajax({
contentType: "multipart/form-data" ,
url: "/adata/adata/payment/PaymentAction/upload.menu?_pathName=/adata//payment.jsp" ,
type: "POST" ,
data:formData,
dataType: "text" ,
processData: false , // 告诉jQuery不要去处理发送的数据
contentType: false , // 告诉jQuery不要去设置Content-Type请求头
success: function (result){
alert(result);
}
});
}
|
Java代码:
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
|
String savePath = "d:/" ; //存储路径
String retMsg = "" ; //定义将返回给客户端的信息
try {
if (ServletFileUpload.isMultipartContent(request)) {
List<FileItem> items = new ServletFileUpload( new DiskFileItemFactory()).parseRequest(request);
for (FileItem item : items) {
if (!item.isFormField()) { // 过滤掉表单中非文件域
String fileType = item.getName().substring(item.getName().lastIndexOf( "." ) + 1).toLowerCase(); //文件类型
String fileName = new Date().getTime() + "." + fileType; //保存的文件名
String filePath = savePath + "\\" + fileName; //保存的文件路径
BufferedInputStream in = new BufferedInputStream(item.getInputStream()); // 获得文件输入流
BufferedOutputStream out = new BufferedOutputStream( new FileOutputStream( new File(filePath))); // 获得文件输出流
org.apache.commons.fileupload.util.Streams.copy( in , out, true ); // 开始把文件写到指定的上传文件夹
retMsg += "上传文件成功!" ;
in .close();
out.close();
}
}
}
response.setContentType( "text/html;charset=utf8" );
PrintWriter pw = response.getWriter();
pw.print(retMsg);
pw.flush();
pw.close();
//根据自己需要返回页面一个 retMsg
// return retMsg 证明上传成功
} catch (Exception e) {
e.printStackTrace();
}
|
总结
以上所述是小编给大家介绍的基于HTML5+js+Java实现单文件文件上传到服务器功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
原文链接:http://www.cnblogs.com/huangnn/archive/2017/08/19/7397245.html