JavaWeb:实现文件上传与下载

文件上传前端处理

　　本模块使用到的前端Ajax库为Axio，其地址为GitHub官网。

关于文件上传

　　上传文件就是把客户端的文件发送给服务器端。

　　在常见情况（不包含文件上传）下，我们POST请求Content-Type是application/x-www-form-urlencoded，这意味着消息内容会经过URL编码，就像在GET请求时URL里的QueryString那样。txt1=hello&txt2=world。为了支持表单上传，我们第一个要设置的请求的Content-Type，即为multipart/form-data，以支持客户端向服务器发送二进制数据。

　　一个常见的请求上传格式大概是这样的：

　　

基于表单进行上传

　　我们首先构建一个简易的文件上传表单，这里面有几个需要注意的地方：

  • 在form中，我们添加了enctype="multipart/form-data" 这条属性，enctype属性规定了在发送到服务器之前应该如何对表单数据进行编码
  • action="upload"> 指明了服务器接受文件的地址。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form name="uploadForm" method="POST" enctype="multipart/form-data" action="upload">

        <table>

            <tr>

                <td>UserName</td>

                <td><input type="text" name="username"></td>

            </tr>

            <tr>

                <td>upload1</td>

                <td><input type="file" name="file"></td>

            </tr>

            <tr><td><input type="submit" name="submit" value="上传"></td></tr>

        </table>

    </form>

</body>

</html>

　　然后，再点击上传按钮后，服务器将会接收到上传请求。

补充：

　　在HTML5中，通过在input元素中引入多个multiple属性，使得多个文件的上传变得更加简单，下面均可使一个上传框支持多个文件上传。

<input type="file" name="fieldName" multiple/>

<input type="file" name="fieldName" multiple="multiple"/>

<input type="file" name="fieldName" multiple=""/>

基于FormData进行上传

　　FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据与传统表单具有同样形式。

　　简单来说就是，我们完全用JavaScript代码来拼写表单数据，如下：

var formData = new FormData();

//普通字段

formData.append("username", "Groucho");

formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"

// 文件：基于<input type=‘file’/>

formData.append("userfile", fileInputElement.files[0]);

// 文件：Blob 对象

var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...

var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

　　接着，我们就可以使用axios，来上传数据，此处需要注意的是，我们需要进行请求头的设置：'Content-Type': 'multipart-/form-data'

//构造表头

let config = {

            headers: {

                'Content-Type': 'multipart-/form-data'

            }

        }

axios.post("//127.0.0.1:8000/web/cam", formData, config)

	.then((response) => {…}))

	.catch((error) =>{…});

　　到这里，前端的处理就完成了。　　

文件上传后端处理

　　表单的正文部分由多个子部分组成，如文本、数值、时间，以及文件等。Servlet3.0版本自带了上传文件的api，无需第三方jar包 。Servlet3.0将上传的文件保存在Part实例中，可以通过request对象根据上传的表单控件的name获取对应的part对象，同时也支持多个文件上传。

@WebServlet("/up")

@MultipartConfig  //使用MultipartConfig注解标注改servlet能够接受文件上传的请求

public class UploadServlet extends HttpServlet {

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        Part part = req.getPart("myfile");

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

        String suffix = disposition.substring(disposition.lastIndexOf("."),disposition.length()-1);

          //随机的生存一个32的字符串

        String filename = UUID.randomUUID()+suffix;

          //获取上传的文件名

        InputStream is = part.getInputStream();

        //动态获取服务器的路径

        String serverpath = req.getServletContext().getRealPath("upload");

        FileOutputStream fos = new FileOutputStream(serverpath+"/"+filename);

        byte[] bty = new byte[1024];

        int length =0;

        while((length=is.read(bty))!=-1){

            fos.write(bty,0,length);

        }

        fos.close();

        is.close();

    }

}

说明：

  • 这里需要补充一点的是，文件名的保存，Content-Disposition：form-data; name="file"; filename="test.txt" ，需要通过字符串截取得到.
  • 文件存储在服务器当前项目的根目录下的upload文件夹中，通过req.getServletContext().getRealPath()获取服务器的绝对再将上传的文件写入。

文件下载后端处理

　　通过servlet的响应设置可以设置服务器响应文件流给客户端实现文件下载，思路是，客户端发送请求给服务端告诉服务端需要下载的文件，服务端读取该文件，转换为输入流，在通过outputstream响应给客户端，不过需要设置response的头信息，下面是完整代码

public class DownServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        String file = request.getParameter("file"); //客户端传递的需要下载的文件名

        String path = request.getServletContext().getRealPath("")+"/"+file; //默认认为文件在当前项目的根目录

        FileInputStream fis = new FileInputStream(path);

        response.setCharacterEncoding("utf-8");

        response.setHeader("Content-Disposition", "attachment; filename="+file);

        ServletOutputStream out = response.getOutputStream();

        byte[] bt = new byte[1024];

        int length = 0;

        while((length=fis.read(bt))!=-1){

            out.write(bt,0,length);

        }

        out.close();

    }

}

　　

JavaWeb:实现文件上传的更多相关文章

  1. JavaWeb实现文件上传下载功能实例解析

    转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...

  2. JavaWeb:实现文件上传与下载

    JavaWeb:实现文件上传与下载 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不包含文 ...

  3. JavaWeb实现文件上传下载功能实例解析 （好用）

    转: JavaWeb实现文件上传下载功能实例解析 转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web ...

  4. 使用传统javaweb进行文件上传

    使用传统文件上传方式 1.配置依赖 <properties> <project.build.sourceEncoding>UTF-8</project.build.sou ...

  5. JavaWeb多文件上传及zip打包下载

    项目中经常会使用到文件上传及下载的功能.本篇文章总结场景在JavaWeb环境下,多文件上传及批量打包下载功能,包括前台及后台部分.  首先明确一点:  无法通过页面的无刷新ajax请求,直接发下载.上 ...

  6. 深入分析JavaWeb Item40 -- 文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是很经常使用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传.浏览器在上传的过程中是将文件以流的形式提交到server端的.假设 ...

  7. JavaWeb 之文件上传

    1. 文件上传的要求 1.1 上传对表单的限制 method="post"; enctype="multipart/form-data"; 表单中需要添加文件表 ...

  8. javaweb大文件上传

    本文主要关于利用html表单上传文件的后台代码实现. 需要用到两个工具类Apache commons-fileupload和commons-io. 注意要校验是否选择文件上传,最开始写的时候没有加上校 ...

  9. javaWeb实现文件上传与下载 （转）

    文件上传概述 实现web开发中的文件上传功能,需完成如下二步操作: 在web页面中添加上传输入项 在servlet中读取上传文件的数据,并保存到本地硬盘中. 如何在web页面中添加上传输入项? < ...

随机推荐

  1. "微空间"免费空间很棒哦，很适合中小网站站长

    “微空间”(www.idcbt.com)是最长久的免费云主机 现在在站长圈子里面非常火爆的“微空间”免费空间网(www.idcbt.com)犹如火山爆发一样,瞬间成为了广大站长津津乐道的免费主机空间. ...

  2. LINUX btmp 日志（lastb 命令）

    Linux下/var/log/btmp文件: 今天查看了一下服务器,发现/var/log/btmp日志文件比较大,搜索一下,此文件是记录错误登录的日志,就是说有很多人试图使用密码字典登录ssh服务,此 ...

  3. javascript replace正则替换时调用函数替换的使用

    以下函数将替换英文方式下的单引号和双引号,当然change函数编写决定了你要替换什么? String.prototype.repSpecChar=function()      {           ...

  4. 一种基于Orleans的分布式Id生成方案

    基于Orleans的分布式Id生成方案,因Orleans的单实例.单线程模型,让这种实现变的简单,贴出一种实现,欢迎大家提出意见 public interface ISequenceNoGenerat ...

  5. Centos6.6下安装MariaDB步骤，利用yum进行安装 第二篇

    一.安装过程参考的相关文章: Centos 使用YUM安装MariaDB CentOS安装并设置MariaDB CentOS用yum安装.配置MariaDB MariaDB远程连接配置 ERROR 1 ...

  6. 依赖注入的威力，.NET Core的魅力：解决MVC视图中的中文被html编码的问题

    有园友在博问中提了这样一个问题 —— .NET Core 中文等非英文文字html编码输出问题,到我们的 ASP.NET Core 项目中一看,也是同样的问题. 比如下面的Razor视图代码: @{ ...

  7. iOS 视图，动画渲染机制探究

    腾讯Bugly特约作者:陈向文 终端的开发,首当其冲的就是视图.动画的渲染,切换等等.用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅.UI就是 App 的门面,它的体验 ...

  8. MySQL4：存储过程和函数

    什么是存储过程 简单说,存储过程就是一条或多条SQL语句的集合,可视为批文件,但是起作用不仅限于批处理.本文主要讲解如何创建存储过程和存储函数以及变量的使用,如何调用.查看.修改.删除存储过程和存储函 ...

  9. Flyway， 数据库Schema管理利器

    整天跟数据库打交道的程序员都知道,当数据库的Schema发生改变时是多么痛苦的事情.尤其是一个在不断开发完善的项目,随着需求变化,数据库的schema也会跟着变化,而追踪记录这些变化一向都是费时费力. ...

  10. ActiveMQ第六弹:设置多个并行的消费者

    消息队列本来就是一种经典的生产者与消费者模式.生产者向消息队列中发送消息,消费者从消息队列中获取消息来消费. 消息的传送一般由一个代理来实现的,那就是Message broker(即消息代理).Mes ...