关于ssi-uploader在strutsMVC的单文件/多文件上传实现

来源：互联网发布：计算工程量的软件编辑：程序博客网时间：2024/06/15 00:40

谈及单文件/多文件上传，现如今有许多插件都可以使用，而且效果都不错。但是针对我们开发项目的需求，需要有针对性的做出选择。因为，好用的东西，对于你的开发环境，并不是一定适用。笔者开发的系统需要在浏览器兼容性环境下使用多文件上传，而且是在IE这个填不满的巨坑中实现。这不免使原本较为简单的多文件上传，多了一层面纱。笔者尝试了多种单文件/多文件上传插件，发现只有ssi-uploader才能够在IE兼容性环境下正常使用拖拽及多文件选择上传功能，其它的插件都会导致样式或者功能异常无法正常使用，但是不是兼容性就可以正常使用拉。

网上大多提倡的是使用多个input标签形式来实现多文件上传，但是这种方式并不能够在文件中进行多选。比较其它插件来说，也对于客户来说，会觉得low了一些。ssi-uploader是针对springMVC使用的。现在笔者是struts2MVC。那么首先我们先思考一下，文件上传的流程：选择文件-》将路径传递到后台-》输入流以字节方式读取文件-》输出流根据指定路径写入到服务器指定位置-》文件上传结束。

有这个思路后，我们看看怎么引用使用：

1.先从网上下载ssi-uploader.rar，里面会有这些文件

2.引入这些文件：

css在<head></head>中引入

js在body中引入

3.在body中加入添加以下代码用来承载展示的内容。在原作者的代码中，input元素是在最里面的div里面的，但是由于自身的需求，将input元素移动到最外层的div中，但这对功能实际上没有影响，只对样式有影响。

4.接下来就是如何调用使用了：url是你调用后台的方法路径，其后可以传递你要的参数；maxfilesize是现在你选择文件的大小，超过2048的不允许上传；allowed是你限制的哪些文件允许上传。

$('#ssi-upload').ssi_uploader({url:'<%=contextPath%>/coper/filesUpload/filesUpload.shtml?checkId='+checkId,maxFileSize:2048,allowed:['jpg', 'jpeg', 'png', 'bmp', 'gif','dwg','doc','txt','docx','xlsx','xls']});

5.现在该想着如何传值了，及要的值在哪里可以找到，请看以下代码。在源码中并没有fileName这个参数，这个是笔者需要的，才进行传递的。如果你们也有需要的数据，也可以这种方式传递，ssi-uploader主要将选中的文件以封装到formData对象当中进行传递。中文参数传递时，需要注意：由于传递前已经做了一次编译，所以这里不需要像网上说的那样进行二次encodeUrl，然后后端URLDecoder.decode(fileName,"utf-8");即可得到值。当然对于笔者而言，这个fileName已经处理了javaBean的，就是get/set来一波。这个是struts的传递值方式的一种。这个thisS.toUpload[i]是个file的对象，不是一个路径，里面包含了一些关于文件的信息，当然还包括了路径。struts2MVC的话，需要以private Object files；方式来获取这个值。获取来的files,你会发现，你的中文路径乱码了。。而且怎么转换都转换的有问题。不知道springMVC有没有这个问题。

对于我们来说，只要路径，其它的无所谓呀。接下来就不管它是不是乱码了，先获取路径，因为定义是Object对象，所以得用Object获取属性的方式来获取我们要的路径。在springMVC中是另一种方式进行转换，不是使用DefaultFileItem，原作者也已经说明了，这里就不说了。获取到路径后，进行转码。这里就涉及到utf-8与gbk的中文汉字字节的问题了，不明白的，可以去复习一下。以下方式转换出来的路径，出现了新问题，只有偶数的中文文件名才能转码成功。奇数的就不可以了。网上也有给出一种方式进行转码，就是判断它的奇偶性，然后奇数的给它添加一个中文，转成功后再去掉。但是对于有些客户的文件命名，像这样诸葛_诸葛先生.诸葛先.docx 等不规则的命名，那要怎么处理？这样就太麻烦了。有遇到这个情况的，就像笔者前面说的，直接把前端的文件名一起传过来，thisS.toUpload[i].name这个可以获取到文件名。传到后台后，直接把路径进行切割拼装。这样就不怕什么乱码了。文件路径获取绝对正确。

6.获取到文件路径后，就是将文件输入输出拉：

7.接着将上传成功的标识传递到前端，当然也是搞一个message，然后print到前端拉。因为ssi-uploader是以ajax方式进行文件上传的，不刷新页面的话，需要以这种方式传递。

在源码中找到这个方法：

里面的data就是你传递过来的参数拉！

以下是笔者获取到的参数，因为上传的比较多文件，所以返回的也比较多：

下面给出最后完成的效果图：

转载请注明出处，谢谢！

阅读全文

0 0