h5里js和servlet实现文件上传的实现步骤


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次教大家的是在H5里如何用JS和servlet来实现文件上传,不过有一个前提条件,必须要是h5和jsp3.0版本,因为用到了新属性,获取file对象和后台得到part对象。

下面给大家看一个案列

前台jsp

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

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

</head>

<body>

    <p>

        name:<input type="text" id="name"/>

        文件:<input type="file" id="file"/>

        <br>

        <button id="btu" onclick="btu()">提交</button>

    </p>

</body>

  

<script>

    function btu(){

            var name=$("#name").val();

            var file=$("#file")[0].files[0];//新特性,获取文件对象

            var fordata=new FormData();//新特性,得到formData对象,把获取的值扔进去,相当于map

            fordata.append("name",name);

            fordata.append("file",file);

            console.log(file)

            $.ajax({

                url:"/war-2/UpdataFile",

                data:fordata,

                cache:false,

                processData:false, //必须写

                contentType:false, //必须写

                type:"post",

                success:function(data){

  

                }

            })

    }

</script>

</html>

后台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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

package up;

  

import java.io.File;

import java.io.IOException;

import java.util.Collection;

  

import javax.servlet.ServletException;

import javax.servlet.annotation.MultipartConfig;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.Part;

  

/**

 * Servlet implementation class UpdataFile

 */

@MultipartConfig(location="E:/")

@WebServlet("/UpdataFile")

public class UpdataFile extends HttpServlet {

    private static final long serialVersionUID = 1L;

  

    private File file;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

            System.out.println("1111111111");

    }

  

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        //得到part对象,这个对象有write的方法,直接写到指定位置。但是千万别忘了写@MultipartConfig(location="E:/")注解,不指定位置默认是写到注解指定的位置。

        Part part = request.getPart("file");

        //普通的字段可以采用常规的getparamter的方法得到。

        System.out.println(new String(request.getParameter("name").getBytes("iso-8859-1"),"utf-8"));

        System.out.println(part.getName());

        System.out.println(part.getHeader("Content-Disposition"));

        System.out.println(part.getSize());

        String fileName = getFileNameFromPart(part); 

        part.write(fileName);

    }

     //截取文件名 

    public String getFileNameFromPart(Part part) { 

        String header = part.getHeader("Content-Disposition"); 

        String fileName = header.substring(header.indexOf("filename=\"")+10, header.lastIndexOf("\"")); 

        return fileName; 

    }

}


相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

html5中的DOM编程的实现步骤

用H5做有特效的下拉框

HTML里FormData对象的详细介绍

以上就是h5里js和servlet实现文件上传的实现步骤的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

echarts-基于html5 canvas的javascript图表库图文详解

h5做出手机摇一摇功能的实现步骤

iconfont图标引用的方法步骤(代码)

cors跨域资源共享详细介绍(附代码)

浅谈javascript对象属性的特性和defineproperty方法

h5同层video播放器接入实例分享

你必须知道的10个chrome开发工具和技巧

如何在html5画布中绘制文本图形

了解javascript有必要使用服务端渲染吗

javascript如何判断对象是否数组

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...