idea文件上传功能的实现

一、传统方式

(1)准备好前台页面upload.html

设置表单属性:

action=上传文件后台接口

method="post"(必须是post)

enctype="multipart/form-data" (表明需要向服务器发送二进制数据,而不是常规的文本)

文件输入框 <input type="file">

<form action="/upload"  method="post" enctype="multipart/form-data">
    <input type="file" name="files">
    <input type="submit" value="上传">
</form>

 

(2)加入相应的jar包

(3)准备接收文件上传Servlet

url路径一定要与上面表单的action保持一致

(4)编写文件上传后台代码

try {
    // 配置上传参数
    DiskFileItemFactory factory = new DiskFileItemFactory();
    ServletFileUpload upload = new ServletFileUpload(factory);
    // 解析请求的内容提取文件数据
    @SuppressWarnings("unchecked")
    List<FileItem> formItems = upload.parseRequest(request);

    // 迭代表单数据
    for (FileItem item : formItems) {
        // 处理不在表单中的字段
        if (!item.isFormField()) {
            String fileName = item.getName();
            //定义上传文件的存放路径
            String path = request.getServletContext().getRealPath("/uploadFiles");
            //定义上传文件的完整路径
            String filePath = String.format("%s/%s",path,fileName);
            File storeFile = new File(filePath);
            // 在控制台输出文件的上传路径
            System.out.println(filePath);
            // 保存文件到硬盘
            item.write(storeFile);
        }

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.write("上传完成");
        out.close();
    }
} catch (Exception ex) {

}

(5)准备存放上传文件的目录,注意和上面代码中的路径保持一致

注意:空的目录idea不会更新到服务器(这应该是个bug),所以可以在里面随便放个文件,哪怕再删掉也行,迫使idea更新

二、使用uploadify插件

上传功能在我们的程序中是经常会用到的,而传统的http上传在安全性和文件大小上都会有一定的限制,而且不能看到上传进度。Uploadify是一款基于jQuery的无刷新前端上传插件,主要有以下的特点:

1、高度地定义化,参数、方法和事件丰富

2、支持多文件上传和进度显示

3、采用异步工作方式

使用方法:

(1)加入插件

直接将uploadify压缩包解压,复制到项目中

(2)准备上传文件页面

<input id="upload" name="files" type="file" >
<input type="button" onclick="upload()" value="上传">
<script>
    $("#upload").uploadify({
        'swf': 'uploadify/uploadify.swf',  //FLash文件路径
        'buttonText': '选择文件',  //按钮文本
        'method':'post', //请求方式
        'uploader': "/upload",  //处理文件上传Servlet
        'auto': false, //true表示选择文件后自动上传
        'multi': false, //是否支持多文件上传
        'fileTypeDesc': '图片文件',  //文件描述
        'fileTypeExts': '*.png;',  //上传的文件后缀过滤器
        //上传成功后的回调函数
        'onUploadSuccess' : function(file, data, response) {
            alert(data); //此处仅仅是打印后台反馈的结果,实际中根据需要处理
        }
    });

    function upload() {
        $('#upload').uploadify('upload', '*')
    }
</script>

(3)后台代码和传统方式一样

三、Servlet3.0实现文件上传

servlet3.0的开发者不再需要将Commons FileUpload 组件导入到他们的工程中去。处理上传文件的servlet只需用@MultipartConfig进行注解。

@WebServlet(urlPatterns = "/upload3")
@MultipartConfig
public class UploadServlet3 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Part part = request.getPart("files");

        InputStream is = part.getInputStream();
        String path = request.getServletContext().getRealPath("/uploadFiles");
        String filename = String.format("%s/%s",path,getFilename(part));
        FileOutputStream fos = new FileOutputStream(new File(filename));
        byte[] buf = new byte[1024];
        while (is.read(buf) != -1) {
            fos.write(buf);
        }
        fos.flush();
        fos.close();
        is.close();
    }

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

    }

    private String getFilename(Part part) {
        String contentDispositionHeader = part.getHeader("content-disposition");
        String[] elements = contentDispositionHeader.split(";");
        for (String element : elements) {
            if (element.trim().startsWith("filename")) {
                return element.substring(element.indexOf('=') + 1).trim().replace("\"", "");
            }
        }
        return null;
    }

四、总结

uploadify、Servlet3.0并不是替代传统方式,而是对其进行简化和优化。uploadify简化和优化了前端,而Servlet3.0简化了后台代码。

猜你喜欢

转载自blog.csdn.net/zx_balabala/article/details/81736026