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(); }
效果:
- 成功把目录打散,文件名也是独一无二的了。