基于HTML5+js+Java实现单⽂件⽂件上传到服务器功能
上传单⽂件到服务器
应公司要求,在HTML5页⾯上实现上传⽂件到服务器,对于⼀个还没毕业的实习⽣菜鸟来说,这可不得了-----不会,⽹上各种百度,找各种博客还是没解决,最后还是请教了公司的⼤神,⼈家给卸了⼀个例⼦,然后根据⼈家写的终于把这个上传⽂件搞定。
好了,开始上代码。HTML5代码:
js代码:
FormData可以把它理解成⼀个虚拟的表单对象,它只有⼀个⽅法append,我们可以通过append向FormData⾥⾯添加各种需要提交的数据。
url:/adata/adata/payment/PaymentAction/upload.menu----指的是你Java接受信息的action路径
_pathName=/adata//payment.jsp-----------指的是你HTML5页⾯的虚拟路径。 alert(result);-------指的是从Java后台返回的信息。
function upload() {
mydata = document.getElementById(\"mydata\").files[0]; formData = new FormData();
formData.append(\"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代码:
String savePath = \"d:/\";//存储路径
String retMsg = \"\";//定义将返回给客户端的信息 try {
if (ServletFileUpload.isMultipartContent(request)) {
List 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实现单⽂件⽂件上传到服务器功能,希望对⼤家有所帮助,如果⼤家有任何疑问欢迎给我留⾔,⼩编会及时回复⼤家的!