java文件上传技术

最新推荐文章于 2023-07-05 17:24:46 发布

何厚勋

最新推荐文章于 2023-07-05 17:24:46 发布

阅读量1k

点赞数

分类专栏： java技巧文章标签： servlet文件上

本文链接：https://blog.csdn.net/hejiajiaming/article/details/78207555

版权

java技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用到了Apache 的common-uploader jar包实现后台的文件上传技术。
前台使用了webUploader的技术，更方便和形象的展现上传效果。

1.普通文件上传
前端界面编写

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

enctype 一定是 multipart/form-data

servlet

package cn.hjm.controller;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;

public class Uploader extends HttpServlet {

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

        //看common-uploader的官方文档就知道以下代码
        // Create a factory for disk-based file items
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // Configure a repository (to ensure a secure temp location is used)
        ServletContext servletContext = this.getServletConfig().getServletContext();
        File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
        factory.setRepository(repository);
        ServletFileUpload sfu = new ServletFileUpload(factory);
        sfu.setHeaderEncoding("utf-8");
   //以上都是官方例子

        try {
            // Parse the request
            List<FileItem> items =sfu .parseRequest(request);
            //获取遍历器
            Iterator<FileItem> iter = items.iterator();
            //遍历
            while (iter.hasNext()) {
                FileItem item = iter.next();
                if (item.isFormField()) { //判断是否是普通文本框
                    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) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

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

        doGet(request,response);
    }
}

这两个就可以进行文件的上传了，是不是很简单。

2.如何展示上传进度呢？

采用了百度团队开源的 webUploader ，这个去百度搜索一下就可以下载了
1.引用了三个文件

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

编写前端代码



<body>
   <div id="uploader">
        <!-- 显示文件列表信息-->
            <ul id ="fileList"></ul>
        <!-- 选择文件区域 -->
        <div id ="filePicker" >点击选择文件</div>
   </div>
   <script type="text/javascript">
        //1.初始化WebUpload，以及配置全局的参数
        var uploader = WebUploader.create(
            {
            //flashk控件的地址
            swf: "${pageContext.request.contextPath}/js/Uploader.swf",
            //后台提交地址
            server:"${pageContext.request.contextPath}/Uploader",
            //选择文件控件的标签
            pick:"#filePicker",
            //自动上传文件
            auto:true,
            }
        );

        //2.选择文件后，文件信息队列展示
        // 注册fileQueued事件：当文件加入队列后触发
        // file: 代表当前选择的文件
        uploader.on("fileQueued",function(file){
            //追加文件信息div
            $("#fileList").append("<div id='"+file.id+"' class='fileInfo'><span>"+file.name+"</span><div class='state'>等待上传...</div><span class='text'></span></div>");
        });


        //3.注册上传进度监听
        //file: 正在上传的文件
        //percentage: 当前进度的比例。最大为1.例如:0.2
        uploader.on("uploadProgress",function(file,percentage){
            var id = $("#"+file.id);
            //更新状态信息
            id.find("div.state").text("上传中...");
            //更新上传百分比
            id.find("span.text").text(Math.round(percentage*100)+"%");
        });

        //4.注册上传完毕监听
        //file:上传完毕的文件
        //response:后台回送的数据，以json格式返回
        uploader.on("uploadSuccess",function(file,response){
            //更新状态信息
            $("#"+file.id).find("div.state").text("上传完毕");
        });



    </script>
  </body>

然后，servlet还是上面的那个，这样就可以完成进度的展现了。
这些功能看过去有点难度，去做其实还是很简单的。多动手实践。没有一步就可以成功的。
爱迪生发明电灯丝还经历了那么多的失败。我们这算什么 。
所以，怕出现错误而不敢去实践的程序员不会成长。
希望自己能够突破自己。

百度下载都可以找到
用到了jar包是
commons-fileupload-1.2.2.jar
commons-io-2.1.jar

css：
webuploader.css

js：
jquery-1.10.2.min.js
Uploader.swf 兼容IE
webuploader.js

何厚勋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
java文件上传技术

用到了Apache 的common-uploader jar包实现后台的文件上传技术。前台使用了webUploader的技术，更方便和形象的展现上传效果。1.普通文件上传前端界面编写<body> <form action="Uploader" method="post" enctype="multipart/form-data"> 请选择上传的文件：<inpu
复制链接

扫一扫