【不用框架】文件上传和下载（三）

更新时间：2022-08-17 19:14:51

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算法来进行打散。

代码

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

使用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();
        }

效果：

【不用框架】文件上传和下载（三）

上一篇 : ：区块链里所说的“智能合约”是什么？下一篇 : 《中国人工智能学会通讯》——6.30 图灵和人工智能到底是什么关系？

【不用框架】文件上传和下载（三）

SmartUpload解决乱码

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

分析

代码

文件上传细节

分析

代码

效果：

相关阅读

推荐文章