【不用框架】文件上传和下载(三)

简介: 文件上传就是把用户的信息保存起来。

SmartUpload解决乱码

这个组件解决乱码问题有点麻烦,在网上找了各种办法也没找到简单的......

所以,如果数据不涉及到中文就使用SmartUpload组件,涉及到中文数据就使用FileUpload组件吧!


多个文件上传,动态添加上传控件

假设我现在有多个文件要上传,而且要上传的个数是不确定的。那么我们要怎么办呢???

我们不可能列出很多很多个上传文件的控件在页面上,这样不美观。如果用户用不到那么多个控件,也浪费呀。

所以,我们想要动态地增添上传文件的控件,如果用户还想要上传文件,只需要动态地生成控件出来即可!

分析

要想在页面上动态地生成控件,无非就是使用JavaScript代码。

那么我们要怎么做呢??

这样子吧:当用户想要上传文件的时候,就点击按钮,按钮绑定事件,生成文件上传的控件

为了做得更加完善,每当生成了文件上传的控件,也提供一个删除按钮,删除该控件!

我们应该使用div装载着我们要生成的控件和删除按钮,而用户点击删除的时候,应该是要把删除按钮和文件上传控件都一起隐藏起来的。所以,最好就是使用嵌套div

代码

页面代码:

<table border="1px">
    <tr>
        <td>上传用户:</td>
        <td><input type="text" name="username"></td>
    </tr>
    <tr>
        <td>添加上传文件</td>
        <td><input type="button" value="添加上传文件" onclick="addUploadFile()"> </td>
    </tr>
    <tr>
        <td>
            <div id="file">
            </div>
        </td>
    </tr>
</table>

javaScript代码

 <script type="text/javascript">
        function addUploadFile() {
            //生成文件上传控件
            var input = document.createElement("input");
            input.type = 'file';
            input.name = 'fileName';
            //生成删除按钮
            var del = document.createElement("input");
            del.type = 'button';
            del.value = '删除';
            //生成内部的div
            var innerDiv = document.createElement("div");
            //将两个控件绑定到内部div上
            innerDiv.appendChild(input);
            innerDiv.appendChild(del);
            //得到外部div控件,并将内部div绑定到外部div上
            var outterDiv = document.getElementById("file");
            outterDiv.appendChild(innerDiv);
            //为删除按钮绑定事件
            del.onclick = function dele() {
                //调用外界div的remove方法把内部的div干掉
                this.parentNode.parentNode.removeChild(this.parentNode);
            }
        }
    </script>

文件上传细节

  • 如果上传文件的大小大于我们设定文件的大小,那么文件在上传的时候会使用临时文件保存上传数据。在上传完毕后,我们应该删除临时文件
  • 上传文件的位置是不能在WEB服务器管理之下的,否则可能造成安全问题【其他人有可能通过手段来修改上传文件】
  • 如果上传文件名相同,那么就会把原本的上传文件覆盖掉。我们要生成一个独一无二的文件名。
  • 如果用户量很大,上传文件非常多。那么我们不应该在一个目录保存所有的上传文件,这样很可能造成磁盘奔溃了。所以我们要把上传的文件打散到不同的目录下

分析

删除临时文件问题是非常简单的,只需要在所有的操作完毕之后,调用FileItem的delete()方法即可

让上传文件的位置不能在WEB服务器管理之下,我们把上传文件的位置放到WEB-INF/目录下即可!

文件名相同的问题,我们可以使用UUID+用户上传的文件名来作为我们保存上传文件名。这样的文件名就是独一无二的了。

要将上传的文件进行打散,那么我们需要使用HashCode算法来进行打散

  • 低四位生成一级目录
  • 5-8位生成二级目录

代码

下面我们写一个比较完善的上传文件代码

  • 使用hashCode算法来打散保存的目录
   private String makeDirPath(String fileName, String path) {
        //通过文件名来算出一级目录和二级目录
        int hashCode = fileName.hashCode();
        int dir1 = hashCode & 0xf;
        int dir2 = (hashCode & 0xf0) >> 4;
        String dir = path + "\\" + dir1 + "\\" + dir2;
        //如果该目录不存在,就创建目录
        File file = new File(dir);
        if (!file.exists()) {
            file.mkdirs();
        }
        //返回全路径
        return dir;
    }

生成独一无二的文件名

  private String makeFileName(String fileName) {
        //使用下划线把UUID和文件名分割开来,后面可能会解析文件名的。
        return UUID.randomUUID().toString() + "_"+ fileName;
    }

上传的代码

   //创建工厂
        DiskFileItemFactory factory = new DiskFileItemFactory();
        //通过工厂创建解析器
        ServletFileUpload fileUpload = new ServletFileUpload(factory);
        //设置upload的编码
        fileUpload.setHeaderEncoding("UTF-8");
        //判断上传表单的类型
        if(!fileUpload.isMultipartContent(request)){
            //上传表单为普通表单,则按照传统方式获取数据即可
            return;
        }
        try {
            //解析request对象,得到List【装载着上传的全部内容】
            List<FileItem> list = fileUpload.parseRequest(request);
            //遍历List,判断装载的内容是普通字段还是上传文件
            for (FileItem fileItem : list) {
                //如果是普通输入项
                if (fileItem.isFormField()) {
                    //得到输入项的名称和值
                    String name = fileItem.getFieldName();
                    String value = fileItem.getString("UTF-8");
                    System.out.println(name + " = " + value);
                } else {
                    //如果是上传文件
                    //得到上传名称【包括路径名】
                    String fileName = fileItem.getName();
                    //截取文件名
                    fileName = fileName.substring(fileName.lastIndexOf("\\") + 1);
                    //生成独一无二的文件名
                    fileName = makeFileName(fileName);
                    InputStream inputStream = fileItem.getInputStream();
                    //得到项目的路径,把上传文件写到项目中
                    String path = this.getServletContext().getRealPath("/WEB-INF/uploadFile");
                    //得到分散后的目录路径
                    String realPath = makeDirPath(fileName, path);
                    FileOutputStream outputStream = new FileOutputStream(realPath + "\\" + fileName);
                    byte[] bytes = new byte[1024];
                    int len = 0;
                    while ((len = inputStream.read(bytes)) > 0) {
                        outputStream.write(bytes, 0, len);
                    }
                    inputStream.close();
                    outputStream.close();
                    //删除临时文件的数据
                    fileItem.delete();
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        }

效果:

  • 成功把目录打散,文件名也是独一无二的了。

11.jpg


目录
相关文章
|
2月前
|
JSON 前端开发 Go
前端文件下载的方式
【10月更文挑战第5天】
130 58
|
2月前
|
监控 前端开发 安全
C#一分钟浅谈:文件上传与下载功能实现
【10月更文挑战第2天】在Web应用开发中,文件的上传与下载是常见需求。本文从基础入手,详细讲解如何在C#环境下实现文件上传与下载。首先介绍前端表单设计及后端接收保存方法,使用`&lt;input type=&quot;file&quot;&gt;`与`IFormFile`接口;接着探讨错误处理与优化策略,如安全性验证和路径管理;最后讲解文件下载的基本步骤,包括确定文件位置、设置响应头及发送文件流。此外,还提供了进阶技巧,如并发处理、大文件分块上传及进度监控,帮助开发者构建更健壮的应用系统。
158 15
|
7月前
|
Java
Struts文件上传与下载详解_上传单个文件
Struts文件上传与下载详解_上传单个文件
|
7月前
|
Java
Struts文件上传与下载详解 _上传多个文件
Struts文件上传与下载详解 _上传多个文件
|
7月前
|
Java
Struts文件上传与下载详解_文件的下载
Struts文件上传与下载详解_文件的下载
|
存储 前端开发 JavaScript
后端文件上传以及下载功能实现
上一章讲到前端文件下载功能的实现,之前也讲过前端文件上传功能的实现,这一章就讲一下后端怎么接收前端上传的文件,以及怎么实现文件下载功能。
430 0
|
前端开发 Java Apache
文件上传与下载
文件上传与下载 文件上传也称为upload,是指将本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛,我们经常发微博、发微信朋友圈都用到了文件上传功能。 文件上传时,对页面的form表单有如下要求: method=“post” 采用post方式提交数据 enctype=“multipart/form-data” 采用multipart格式上传文件 type=“file” 使用input的file控件上传
|
缓存 前端开发
前端下载并生成文件
前端下载并生成文件
|
前端开发 JavaScript API
我学会了,写一个前端下载文件功能
过去有很多次文件下载的功能,但是都没有记录下来,这次有空就把文件下载的功能从0写一遍,于是就有了这篇文章。 我会从简到难的方式去实现下载功能。从直接下载字符串到简单请求下载文件,最终通过后端返回的文件名来实现动态下载文件。
724 0
我学会了,写一个前端下载文件功能
|
存储 前端开发 应用服务中间件
关于项目中文件上传
关于项目中文件上传
225 0