关于ssi-uploader在strutsMVC的单文件/多文件上传实现
2017-12-06 16:58
330 查看
谈及单文件/多文件上传，现如今有许多插件都可以使用，而且效果都不错。但是针对我们开发项目的需求，需要有针对性的做出选择。因为，好用的东西，对于你的开发环境，并不是一定适用。笔者开发的系统需要在浏览器兼容性环境下使用多文件上传，而且是在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,你会发现，你的中文路径乱码了。。而且怎么转换都转换的有问题，这是因为你的web.xml中设置了字符编码为非UTF-8，设置成UTF-8就不会有这个问题了。
由于我们获取来的是Object对象，所以需要将它转成我们需要的DefaultFileItem对象，然后从这个DefaultFileItem对象中拿到我们要的FileItem对象，这样就可以得到输入流的对象了，这个也是文件上传到服务器的关键所在，获取路径的话，只能实现本地的上传吧，无法实现本地到服务器的上传。在springMVC中是另一种方式进行转换，不是使用DefaultFileItem，原作者也已经说明了，这里就不说了。
6.获取到文件的输入流后，就是将文件写入输出啦！这里要特别注意的是，要先关闭输出流，再关闭输入流。不然的话会导致文件被占用，假设你有需要马上上传马上删除的情况，就会导致文件无法被删除。
7.接着将上传成功的标识传递到前端，当然也是搞一个message，然后print到前端拉。因为ssi-uploader是以ajax方式进行文件上传的，不刷新页面的话，需要以这种方式传递。
在源码中找到这个方法：
里面的data就是你传递过来的参数拉！
以下是笔者获取到的参数，因为上传的比较多文件，所以返回的也比较多：
下面给出最后完成的效果图：
转载请注明出处！
网上大多提倡的是使用多个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,你会发现，你的中文路径乱码了。。而且怎么转换都转换的有问题，这是因为你的web.xml中设置了字符编码为非UTF-8，设置成UTF-8就不会有这个问题了。
由于我们获取来的是Object对象，所以需要将它转成我们需要的DefaultFileItem对象，然后从这个DefaultFileItem对象中拿到我们要的FileItem对象，这样就可以得到输入流的对象了，这个也是文件上传到服务器的关键所在，获取路径的话，只能实现本地的上传吧，无法实现本地到服务器的上传。在springMVC中是另一种方式进行转换，不是使用DefaultFileItem，原作者也已经说明了，这里就不说了。
6.获取到文件的输入流后，就是将文件写入输出啦！这里要特别注意的是，要先关闭输出流，再关闭输入流。不然的话会导致文件被占用，假设你有需要马上上传马上删除的情况，就会导致文件无法被删除。
7.接着将上传成功的标识传递到前端，当然也是搞一个message，然后print到前端拉。因为ssi-uploader是以ajax方式进行文件上传的，不刷新页面的话，需要以这种方式传递。
在源码中找到这个方法：
里面的data就是你传递过来的参数拉！
以下是笔者获取到的参数，因为上传的比较多文件，所以返回的也比较多：
下面给出最后完成的效果图：
转载请注明出处！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
- 一个关于用Struts实现文件上传异常的解决
- WebUploader+SpringMVC实现文件上传功能
- 一个关于用Struts实现文件上传异常的解决
- [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
- 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
- WebUploader+SpringMVC实现文件上传功能
- 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
- [整理]WebUploader + SpringMVC 实现多文件断点续传之一 多文件上传
- webuploader+springmvc实现多文件上传（html+js+css原创，后台代码借鉴）
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
- 关于Struts多文件上传的小例子--可完全实现
- 使用SpringMVC配合jQuery文件上传插件ssi-uploader实现多图片可预览上传
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件） ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字， C# WinForm 中英文实现， 国际化实现的简单方法 ASP.NET Core 2 学习笔记（六）ASP.NET Core 2 学习笔记（三）
- Struts实现自动多文件上传
- struts 实现文件上传与下载
- 在Struts 2中实现文件上传