服务器之家

服务器之家 > 正文

基于HTML5+js+Java实现单文件文件上传到服务器功能

时间:2020-12-18 14:21     来源/作者:ML夜神

上传单文件到服务器                                                  

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

  好了,开始上代码。

HTML5代码:

js" id="highlighter_133531">
?
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

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
最新idea2020注册码永久激活(激活到2100年)
最新idea2020注册码永久激活(激活到2100年) 2020-07-29
返回顶部