multipart/form-data提交后台获取数据方法

2025-09-27 20:54:23

1、首先创建一个userPicUpload.html测试的页面,里面添加一个input的type为file的表单,将form标签添加enctype="multipart/form-data"属性

完整的页面测试代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>测试上传</title>

    <script src="../resources/js/jquery-validation/jquery.min.js"></script>

</head>

<body>

<form id="userInfoForm" method="post"

      action="../user/userPicUpload" enctype="multipart/form-data">

    <fieldset>

        <legend>用户基本信息</legend>

       

            <label for="userPic">头像</label>

            <input id="userPic" name="userPic" type="file">

       

       

            <input class="submit" type="submit" value="提交">

       

    </fieldset>

</form>

</body>

</html>

multipart/form-data提交后台获取数据方法

2、本教程示例后台代码以java的web服务来举例说明,采用springMVC框架,后端代码如下:

@RequestMapping("/userPicUpload")

@ResponseBody

public void userPicUpload(HttpServletRequest request){

    boolean isMultipart = ServletFileUpload.isMultipartContent(request);

    if(isMultipart){

        ServletFileUpload upload = new ServletFileUpload();

        upload.setHeaderEncoding("UTF-8");

        int i = 0;

        try {

            FileItemIterator iter = upload.getItemIterator(request);

            while(iter.hasNext()){

                i++;

                FileItemStream fi = iter.next();

                InputStream in = null;

                OutputStream fileout = null;

                try {

                    String fileName = fi.getName();

                    File file = new File("f:/upload_test/"+ fileName.substring(0, fileName.lastIndexOf(".")) + "_" + i + fileName.substring(fileName.lastIndexOf(".")));

                    in = fi.openStream();

                    ByteArrayOutputStream bstream = new ByteArrayOutputStream();

                    Streams.copy(in, bstream, true);

                    fileout = new FileOutputStream(file);

                    bstream.writeTo(fileout);

                } catch (IOException e) {

                    throw new RuntimeException("file copy error!",e);

                }finally{

                    if(in != null){

                        try {

                            in.close();

                        } catch (IOException e) {

                            e.printStackTrace();

                        }

                    }

                    if(fileout != null){

                        try {

                            fileout.close();

                        } catch (IOException e) {

                            e.printStackTrace();

                        }

                    }

                }

            }

        } catch (Exception e) {

            throw new RuntimeException("upload file error.",e);

        }

    }

}

multipart/form-data提交后台获取数据方法

3、后端代码处理上传的内容数据是使用commons-fileupload-1.3.jar类库来处理的,

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

判断是否是Multipart,然后ServletFileUpload获取FileItemIterator迭代

FileItemStream fi = iter.next();

取出所有的上传内容项,InputStream,然后将数据写入到一个文件中

运行web项目,访问页面,可以看到一个上传的表单项

multipart/form-data提交后台获取数据方法

4、点击上传按钮,这里我们为了测试,选择一个图片文件进行上传(为了上传之后保存的文件好验证)

multipart/form-data提交后台获取数据方法

5、打开网页调试工具,点击提交按钮之后,可以从调试工具的网络抓包请求中可以看到详细的Content-type和body内容

multipart/form-data提交后台获取数据方法

6、提交完成之后,去我们后台代码写入的F:/upload_test/目录中,查看保存之后的文件,可以看到文件从页面上传到服务端,被服务端接收之后,成功的保存到另一个文件中,并可以正常的打开,正确数据传输和保存的代码都是正确的

multipart/form-data提交后台获取数据方法

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢