酷炫的文件上传技术

1. JavaWeb:上传下载文件

http://blog.csdn.net/axi295309066/article/details/52984462

2. 课程概述

在Web应用系统开发中,文件上传功能是非常常用的功能,今天来主要讲讲JavaWeb中的文件上传功能的相关技术实现,并且随着互联网技术的飞速发展,用户对网站的体验要求越来越高,在文件上传功能的技术上也出现许多创新点,例如异步上传文件,拖拽式上传,黏贴上传,上传进度监控,文件缩略图,大文件断点续传,大文件秒传等等。

本课程需要的基础知识:

  • 了解基本的Http协议内容
  • 基本IO流操作技术
  • Servlet基础知识
    • javascript/jQuery技术基础知识

3. 文件上传的基础

对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,并且所有流数据都会随着Http请求携带到服务器端。所以,文件上传时的请求内容格式要能够基本看懂。

文件上传页面:

 <form action="/itheimaUpload/UploadServlet" method="post" enctype="multipart/form-data">
        请选择上传的文件:<input type="file" name="attach"/><br/>
        <input type="submit" value="提交"/>
    form>

Http请求内容:

酷炫的文件上传技术_第1张图片

酷炫的文件上传技术_第2张图片

4. Java后台使用Servlet接收文件

如果使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般后台选择采用Apache的开源工具common-fileupload这个文件上传组件。

//Java后台代码:Commons-fileUpload组件上传文件
public class UploadServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //1.配置缓存
        DiskFileItemFactory factory = new DiskFileItemFactory(1*1024*1024,new File("c:/tempFiles/"));

        //2.创建ServleFileUpload对象
        ServletFileUpload sfu = new ServletFileUpload(factory);

        //解决文件名称中文问题
        sfu.setHeaderEncoding("utf-8");

        //3.解析
        try {
            List list = sfu.parseRequest(request);

            //解析所有内容
            if(list!=null){
                for(FileItem item:list){
                    //判断是否为普通表单参数
                    if(item.isFormField()){
                        //普通表单参数
                        //获取表单的name属性名称
                        String fieldName = item.getFieldName();
                        //获取表单参数值
                        String value = item.getString("utf-8");
                    }else{

                        //文件
                        if(item.getName()!=null && !item.getName().equals(""))  {

                            //保存到服务器硬盘                  
                            FileUtils.copyInputStreamToFile(item.getInputStream(), new File("c:/targetFiles/"+item.getName()));
                            item.delete();
                        }
                    }
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

5. 使用WebUploader上传组件

文件上传页面的前端我们可以选择使用一些比较好用的上传组件,例如百度的开源组件WebUploader,这个组件基本能满足文件上传的一些日常所需功能,如异步上传文件,拖拽式上传,黏贴上传,上传进度监控,文件缩略图,甚至是大文件断点续传,大文件秒传。

5.1 下载WebUpload组件

http://fex.baidu.com/webuploader/ 到WebUpload官网下载WebUpload包

WebUpload目录结构:

酷炫的文件上传技术_第3张图片

5.2 基本文件上传Demo(包含上传进度)

前端

1.1 在页面导入所需css,js

<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/css/webuploader.css">
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.10.2.min.js">script>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/webuploader.js">script>

1.2 编写上传页面标签

    
    <div id="uploader">
        
        <ul id="fileList">ul>
        
        <div id="filePicker">点击选择文件div>
    div>

1.3 编写webupload代码


                    
                    

你可能感兴趣的:(JavaWeb,JavaWeb基础入门)