HTML5技术

单文件文件上传到服务器(HTML5+js+Java) - ML夜神

字号+ 作者:H5之家 来源:H5之家 2017-08-20 08:00 我要评论( )

上传单文件到服务器 应公司要求,在HTML5页面上实现上传文件到服务器,对于一个还没毕业的实习生菜鸟来说,这可不得了-----不会,网上各种百度,找各种博客还是没解决,最后还是请教了公司的大神,人家给卸了一个例子,然后根据人家写的终于把这个上传文件搞

                                                                                      上传单文件到服务器                                                   

     应公司要求,在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", 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 = ""; { 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(); }

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 前端用Datatables制作包含搜索、自动分页、按列排序、切换显示条数、打印以及多种文件格式保存等功能的Demo -

    前端用Datatables制作包含搜索、自动分页、按列排序、切换显示条数、

    2017-08-10 14:00

  • form表单上传域(type=file)的使用----上传文件 - 垂死挣扎的千年虫

    form表单上传域(type=file)的使用----上传文件 - 垂死挣扎的千年虫

    2017-08-03 13:00

  • 文件下载之断点续传(客户端与服务端的实现) - 农码一生

    文件下载之断点续传(客户端与服务端的实现) - 农码一生

    2017-07-31 18:00

  • 文件各种上传,离不开的表单 - 农码一生

    文件各种上传,离不开的表单 - 农码一生

    2017-07-25 12:00

网友点评
"