文件上传下载 anjuarjs1.x

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/V_Junk/article/details/82413688

文件上传下载 anjuarjs1.x

现在前面： 文章是 demo 级的实现功能而已，高手绕路

不多说，直接看代码：

• FileServlet.java

/**
 * Servlet implementation class FileServlet
 */
@WebServlet(name = "fileServlet", urlPatterns = {"/fileServlet"})
public class FileServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public FileServlet() {
        super();
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     * response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        InputStream in = null;
        OutputStream out = null;
        try {
            //文件名称
            String fileName = request.getParameter("fileName");
            //存放路径 
            String prefix = "";
            String fullName = prefix + fileName;
            response.setContentType("application/force-download");//应用程序强制下载
            in = new FileInputStream(fullName);
            //设置响应头，对文件进行url编码
            fileName = URLEncoder.encode(fileName, "UTF-8");
            response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
            //设置文件大小 java.io.FileInputStream.available() 方法 返回 可读取的字节数的估计值
            response.setContentLength(in.available());
            out = response.getOutputStream();
            byte[] b = new byte[1024];
            int len = 0;
            while ((len = in.read(b)) != -1) {
                out.write(b, 0, len);
            }
            out.flush();
        } finally {
            if (out ! = null){
                out.close();
            }
            if(in != null){
                in.close();
            }
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     * response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doOption(request, response, "2");
    }

    /**
     * @param request
     * @param response
     * @param type     类型，1:下载，2:上传
     * @Title: doOption
     * @Description: Servlet 响应函数
     */
    private void doOption(HttpServletRequest request, HttpServletResponse response, String type) {
        String fileName;

        try {
            if ("2".equals(type)) {

                boolean isMultipart = ServletFileUpload.isMultipartContent(request);
                if (isMultipart) {

                    // 创建工厂（这里用的是工厂模式）
                    DiskFileItemFactory factory = new DiskFileItemFactory();
                    ServletContext servletContext = this.getServletConfig().getServletContext();
                    File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
                    factory.setRepository(repository);
                    ServletFileUpload upload = new ServletFileUpload(factory);
                    List<FileItem> items = upload.parseRequest(request);
                    InputStream ins = null;
                    FileOutputStream fos = null;
                    FileInputStream fis = null;
                    String filePath;
                    try {
                        for (FileItem item : items) {

                            if (!item.isFormField()) {
                                fileName = item.getName();
                                filePath = getServletContext().getRealPath("/") + fileName;
                                // 创建文件输出流
                                File file = new File(filePath);
                                if (!file.exists()) {
                                    try {
                                        file.createNewFile();
                                    } catch (IOException e) {
                                        e.printStackTrace();
                                    }
                                }
                                fos = new FileOutputStream(file);
                                // 创建输入流
                                ins = item.getInputStream();
                                // 从输入流获取字节数组
                                byte b[] = new byte[1];
                                // 读取一个输入流的字节到b[0]中
                                int read = ins.read(b);
                                while (read != -1) {
                                    fos.write(b, 0, 1);
                                    read = ins.read(b);
                                }
                            } else {
                               // 处理其他参数
                            }
                        }

                    } finally {
                        if (fis != null) {
                            fis.close();
                        }
                        if (fos != null) {
                            fos.close();
                        }
                        if (ins != null) {
                            ins.close();
                        }
                    }

                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }



    public static class Encodes {

        private static final String DEFAULT_URL_ENCODING = "UTF-8";

        public static String urlEncode(String part) {
            try {
                return URLEncoder.encode(part, DEFAULT_URL_ENCODING);
            } catch (UnsupportedEncodingException e) {
                throw new RuntimeException(e);
            }
        }

    }

}

• index.html

<html ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/chapter25.js"></script>
</head>
<div ng-controller="transFileController as s">
    <div style="float: left">
        <script>
            function fileChange() {
                var ele = document.getElementById('arpBtn');
                ele.click();
            }
        </script>
        <button onclick="fileUpload.click()">上传文件</button>
        <button ng-click="uploadFile()" style="display:none" id="arpBtn"></button>
        <input type="file" style="display:none" id="fileUpload" value="选择文件" onchange="fileChange()"/>
    </div>
    <div>
        <button ng-click="fileDownload()"> 文件下载</button>
    </div>
</div>

</html>

• chapter25.js

var app = angular.module('myApp', []);

app.controller('transFileController', function ($scope, $http) {
    /**
     * @desc 换届凭证上传
     */
    $scope.uploadFile = function () {
        var formData = new FormData();
        var file = document.getElementById("fileUpload").files[0];

        formData.append('file', file);

        if (!file) {
            return;
        }
        $http({
            method: 'POST',
            url: 'fileServlet',
            data: formData,
            headers: {
                'Content-Type': undefined
            },
            transformRequest: angular.identity
        }).then(function (data) {
            console.log(data)
        }).catch(function (data) {
            console.log(data);
        })
    }

    $scope.fileDownload = function () {

        jQuery('<form action="fileServlet" method="get">' +  // action请求路径及推送方法
            '<input type="text" name="fileName" value="invokeWithinTransaction.JPG"/>' + // 文件名称及文件路径
            '</form>')
            .appendTo('body').submit().remove();
    }
})

其实 fileDownload 方法开始的时候是这样写的：

  $scope.fileDownload = function () {
        var param = {};
        param['fileName'] = 'invokeWithinTransaction.JPG';
        $http({
            method: 'GET',
            url: 'fileServlet',
            params: param
        }).then(function (data) {
            console.log(data);
        }).catch(function (data) {
            console.log(data);
        })
    }

这样的问题是数据会在 data 里面但是我不知道怎么保存成对应的文件。

至此。