html5+servlet文件上传

墨蓝 2021-06-24 14:37 446阅读 0赞

1、index.jsp

<html>
    <body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <h2>Hello World!</h2>
    <form id="uploadForm" name="uploadform" method="POST"> 
    <input id="fileid" type="file" accept="text/plain"
                οnchange="onfile(this)">
    <input type="reset" name="reset" style="display: none;" />
    </form>
    <script type="text/javascript">
    var xhr;
    function onfile(file) {
    	if (!/\.(txt)$/.test(file.value)) {  
            alert("please upload txt...");  
            $("input[type=reset]").trigger("click");
            return;  
        } else {
        	var fd = new FormData();
            fd.append("fileToUpload", document.getElementById('fileid').files[0]);
            xhr = new XMLHttpRequest();
            xhr.open("POST", "/WebTest/UploadServlet");
            //xhr.setRequestHeader("Content-Type","charset=UTF-8");
            xhr.send(fd);
            xhr.onreadystatechange = processResponse;
        }
        
    }
      
    function processResponse(){
        if(xhr.readyState == 4){
            //alert("upload data liu stop");
            if(xhr.status == 200){
                var infor = xhr.responseText;
                alert(infor);
                $("input[type=reset]").trigger("click");
            }
        }
    }
     
    </script>
    </body>
    </html>

1）HTML5的 input:file上传类型控制：

accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。  
multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

常用的accept：

后缀名       MIME名称
    *.3gpp    audio/3gpp, video/3gpp
    *.ac3    audio/ac3
    *.asf       allpication/vnd.ms-asf
    *.au           audio/basic
    *.css           text/css
    *.csv           text/csv
    *.doc    application/msword    
    *.dot    application/msword    
    *.dtd    application/xml-dtd    
    *.dwg    image/vnd.dwg    
    *.dxf      image/vnd.dxf
    *.gif            image/gif    
    *.htm    text/html    
    *.html    text/html    
    *.jp2            image/jp2    
    *.jpe       image/jpeg
    *.jpeg    image/jpeg
    *.jpg          image/jpeg    
    *.js       text/javascript, application/javascript    
    *.json    application/json    
    *.mp2    audio/mpeg, video/mpeg    
    *.mp3    audio/mpeg    
    *.mp4    audio/mp4, video/mp4    
    *.mpeg    video/mpeg    
    *.mpg    video/mpeg    
    *.mpp    application/vnd.ms-project    
    *.ogg    application/ogg, audio/ogg    
    *.pdf    application/pdf    
    *.png    image/png    
    *.pot    application/vnd.ms-powerpoint    
    *.pps    application/vnd.ms-powerpoint    
    *.ppt    application/vnd.ms-powerpoint    
    *.rtf            application/rtf, text/rtf    
    *.svf           image/vnd.svf    
    *.tif         image/tiff    
    *.tiff       image/tiff    
    *.txt           text/plain    
    *.wdb    application/vnd.ms-works    
    *.wps    application/vnd.ms-works    
    *.xhtml    application/xhtml+xml    
    *.xlc      application/vnd.ms-excel    
    *.xlm    application/vnd.ms-excel    
    *.xls           application/vnd.ms-excel    
    *.xlt      application/vnd.ms-excel    
    *.xlw      application/vnd.ms-excel    
    *.xml    text/xml, application/xml    
    *.zip            aplication/zip    
    *.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

2）accept只能限制上传框中默认文件后缀名，用户仍然可以改成所有文件，这是就能上传其他后缀的文件，所以还需要前段校验：

if (!/\\.(txt)$/.test(file.value))

2、后端servlet：

package cn.edu.nuc.servlet;
    
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.util.List;
    
    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.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    
    /**
     * Servlet implementation class UploadServlet
     */
    public class UploadServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public UploadServlet() {
            super();
            // TODO Auto-generated constructor stub
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// 得到上传文件的保存目录，将上传的文件存放于WEB-INF目录下，不允许外界直接访问，保证上传文件的安全
            String inputPath = "D:\\test";
            File file = new File(inputPath);
            System.out.println("test。。。。");
            // 判断上传文件的保存目录是否存在
            if (!file.exists() && !file.isDirectory()) {
                System.out.println(inputPath + "目录不存在，需要创建");
                // 创建目录
                file.mkdir();
            }
            
            String filename = "";
            // 消息提示
            String message = "";
            try {
                // 使用Apache文件上传组件处理文件上传步骤：
                // 1、创建一个DiskFileItemFactory工厂
                DiskFileItemFactory factory = new DiskFileItemFactory();
                // 2、创建一个文件上传解析器
                ServletFileUpload upload = new ServletFileUpload(factory);
                // 解决上传文件名的中文乱码
                upload.setHeaderEncoding("UTF-8");
                // 3、判断提交上来的数据是否是上传表单的数据
                if (!ServletFileUpload.isMultipartContent(request)) {
                    // 按照传统方式获取数据
                    return;
                }
                // 4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，每一个FileItem对应一个Form表单的输入项
                List<FileItem> list = upload.parseRequest(request);
                for (FileItem item : list) {
                    // 如果fileitem中封装的是普通输入项的数据
                    if (item.isFormField()) {
                        String name = item.getFieldName();
                        // 解决普通输入项的数据的中文乱码问题
                        String value = item.getString("UTF-8");
                        // value = new String(value.getBytes("iso8859-1"),"UTF-8");
                        System.out.println(name + "=" + value);
                    } else {// 如果fileitem中封装的是上传文件
                        // 得到上传的文件名称，
                        filename = item.getName();
                        System.out.println(filename);
                        if (filename == null || filename.trim().equals("")) {
                        	message = "上传失败[文件名空]";
                            continue;
                        }
                        // 注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如：
                        // c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
                        // 处理获取到的上传文件的文件名的路径部分，只保留文件名部分
                        filename = filename
                                .substring(filename.lastIndexOf("/") + 1);
                        // 获取item中的上传文件的输入流
                        InputStream in = item.getInputStream();
                        // 创建一个文件输出流
                        FileOutputStream out = new FileOutputStream(inputPath + "/"
                                + filename);
                        // 创建一个缓冲区
                        byte buffer[] = new byte[1024 * 1024];
                        // 判断输入流中的数据是否已经读完的标识
                        int len = 0;
                        // 循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
                        while ((len = in.read(buffer)) > 0) {
                            // 使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\"
                            // + filename)当中
                            out.write(buffer, 0, len);
                        }
                        out.flush();
                        // 关闭输入流
                        in.close();
                        // 关闭输出流
                        out.close();
                        // 删除处理文件上传时生成的临时文件
                        item.delete();
                        message = "文件上传成功！";
                    }
                }
            } catch (Exception e) {
                message = "文件上传失败！";
                e.printStackTrace();
     
            }
            /*request.setAttribute("message", message);
            request.getRequestDispatcher("/message.jsp").forward(request, response);*/
            
            response.setCharacterEncoding("UTF-8");
            response.getWriter().print(message);
    	}
    
    }