java文件上传技术

客官°小女子只卖身不卖艺 2022-06-07 05:20 114阅读 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.引用了三个文件

编写前端代码

<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