java前后台开发之文件上传

入职java已经快2个月了。做了一个多月的改bug，6天的开发，刚做完一个文件上传，得好好整理下。

文件上传的大体思路其实是一样的，前端通过表单的方式上传，后端解析这个表单请求中的内容，得到文件部分的字段，再以流的形式读到内存中，后面怎么处理看业务了，比如保存到服务器等等。

一、前端 对于我这种前端ui等比较差的，果断选择了bootstrap为我撑撑场面。不会的可以搜一搜学一学，挺好用的。就是为你提供一些漂亮的样式，排版，自适应以及一些比较方便的插件。比如这个文件上传，基于bootstrap刚好有一个方便的fileinput。

先来秀一下效果 是不是挺漂亮的，实际上没有多少是靠我自己写的。

1）首先准备环境，你得有bootstrap环境，它依赖于jquery，这个你也是要的，有网络的童鞋可以直接使用cdn，没有的可以自行下载

<!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

接着是file input插件的环境,我是下载下来用的，下载地址为https://github.com/kartik-v/bootstrap-fileinput/archive/v4.4.3.zip 只需要两个文件，大家对号入座

<script src="XXXXXXXXX/fileinput.min.js"></script> <link href="XXXXXXXXXX/fileinput.min.css" rel="stylesheet">

2）使用，外面那个遮罩和框使用的是bootstrap的模态框，这里不介绍了。只说中间文件上传部分。

<input id="uploadfile" type="file" class="file file-loading">

没了，简介明了，你只要声明好它的class就好，多简单。

然后你在javascript中可以对它进行定制，比如我的需求是这样的：

//上传组件初始化 $("#uploadfile").fileinput({ language: 'zh', //设置语言 uploadUrl: "${ctx}/dataModel/uploadModel", //上传的地址 allowedFileExtensions: ['doc','docx'],//接收的文件后缀 uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 showRemove : true, //显示移除按钮 showPreview : true, //是否显示预览 showCaption: true,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 maxFileCount: 1, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount:true, uploadExtraData: function(previewId, index) { //额外参数 var obj = {}; obj.modelId = select.id; return obj; } });

同时上传完毕的回调

//异步上传返回结果处理 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { var response = data.response; //.... });

前端到此结束

二、后端 后端你可以使用多种方式，我这使用的是SpringMVC，所以我的处理过程是写在Controller中的。

/** * 上传模型 */ @RequestMapping(value = "/uploadModel",method = RequestMethod.POST) @ResponseBody public Object uploadModel(HttpServletRequest request,HttpServletResponse response){ // String dataPortalDir = request.getRealPath(""); //dataPortal路径 String dataPortalDir = "/Users/cd/Downloads/dataPortalSt"; //dataPortal路径 String cacheDir = "/files/cache"; String htmlDir = "/files/html"; Map<String, Object> json = new HashMap<String, Object>(); ShiroHttpServletRequest shiroRequest = (ShiroHttpServletRequest) request; //转换为multipartrequest CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(); MultipartHttpServletRequest multipartRequest = commonsMultipartResolver.resolveMultipart((HttpServletRequest) shiroRequest.getRequest()); /** 页面控件的文件流* */ MultipartFile multipartFile = null; Map map =multipartRequest.getFileMap(); for (Iterator i = map.keySet().iterator(); i.hasNext();) { Object obj = i.next(); multipartFile=(MultipartFile) map.get(obj); } //获取额外参数 String modelId = multipartRequest.getParameter("modelId"); /** 获取文件的后缀* */ String filename = multipartFile.getOriginalFilename(); //拷贝文件 InputStream inputStream; String htmlUrl = ""; try { inputStream = multipartFile.getInputStream(); String tmpFilePath = dataPortalDir+cacheDir+File.separator+UUIDUtil.getUUID()+ filename.substring(filename.lastIndexOf(".")); //保存到服务器 tmpFilePath = FileUtil.copyInputStreamToFile(inputStream, tmpFilePath,false); System.out.println("copy file to:"+tmpFilePath); } catch (Exception e) { e.printStackTrace(); } json.put("code", 0); json.put("message", "上传成功"); json.put("result", htmlUrl); return json; }

这里有点小问题，就是一开始拿到的request并不是MultipartHttpServletRequest，而是ShiroHttpServletRequest。做了一次转换之后才可以。

第二个问题是额外参数，通过转换后是存放在MultipartHttpServletRequest的multiParam…中的，在后端获取的时候通过MultipartHttpServletRequest的getParameter(“modelId”);直接拿到。- -这个折腾了我一下午

2017.09.18 今天发现这个后台上传貌似还有点问题在里面，我们的request被搭框架的整了下，不再是ShiroHttpServletRequest，此时强转会发生错误。这里经过改写后的方法为：

@ResponseBody @RequestMapping(value = "upload") public DataResult<?> uploadFile(@RequestParam("file_data") MultipartFile uploadfile, @RequestParam("modelId") String modelId) { //....可以发现参数直接拿到MultipartFile和modelId }

2017.09.20 今天发现file input在i.e.上兼容性不大好。ie9上都会出问题。没辙了，只能改写。改写过程中发现request不再是MultipartHttpServletRequest，有点泪奔，这是肿么了。 发现了一篇介绍的，看着挺完善的

SpringMVC默认是关闭fileupload功能的，开启该能够并验证文件上传，需要做如下几件事情： 第一：打开SpringMVC的文件上传功能： ***-servlet.xml中配置： <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="100000"/> <property name="maxInMemorySize" value="10240" /> </bean> 配置后，当SpringMVC接受到multipartRequest的时候，就会把HttpServletRequest转为MultipartHttpServletRequest类型， 第二步：创建上传文件的file.jsp： <form action="dynamicFields.action?method=uploadFile" method="post" enctype="multipart/form-data"><input type="file" name="myfile" id="myfile" value="" /><br/><input type="submit" value="确认提交"></form> 一定不要漏掉enctype="multipart/form-data"，否则web容器认为这不是一个MultipartRequest请求，会报错org.springframework.web.multipart.MultipartException: The current request is not a multipart request。 第三步：Controller层创建代码： @RequestMapping(params = {"method=uploadFile"}) public ModelAndView uploadFile(@RequestParam("myfile") MultipartFile myfile, HttpServletRequest request, HttpServletResponse response) throws Exception { if(!myfile.isEmpty()){ logger.info(myfile.getName()); byte[] bs= myfile.getBytes() ; logger.info(new String(bs)); } return null; } 部署web应用运行后，能够看到控制台中打印出上传文件的内容,BINGO搞定（SpringMVC依赖common-fileupload.jar，需要加载该jar包）

按理说应该是这样没跑了，可是我的还是有问题，明天继续改改看。request的类型变化真的好神奇- -。

2017.09.21上午 今天发现按照上面是对的。只不过这样是表单提交，表单提交会导致上传之后会发生页面跳转。禁止页面跳转的方式试了很多，网上说的那些都不大行，原因是他们是禁止了submit，相当于。这时候是不能上传的，要重新写上传。 经过多次查找资料，最后发现了一个好用的jquery-form，确实好用，官网http://malsup.com/jquery/form/.可以兼容到ie8,它的example中还提供了fileupload的例子http://malsup.com/jquery/form/progress.html。 用法很简单，几个回调清晰明了，如下：

$('form').ajaxForm({ beforeSend: function() { var percentVal = '0%'; bar.width(percentVal) percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; bar.width(percentVal) percent.html(percentVal); }, success: function() { var percentVal = '100%'; bar.width(percentVal) percent.html(percentVal); }, complete: function(xhr) { } });

这样就完成了对ie9的兼容，当然上传界面只能自己写写了。

2017.09.21下午 发现这个上传里面的坑还不少。今天上传一个文档的时候出来这么一个异常：

org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-data request failed. /upload_760aac73_045e_4c42_8f13_c36ad1041276_00000015.tmp (Permission denied)] with root cause java.io.FileNotFoundException: /upload_760aac73_045e_4c42_8f13_c36ad1041276_00000015.tmp (Permission denied)

可以看出分成了两个tmp，目测是由于文件超过定义好的2M大小时，会被分成多块上传，上面两个则是分成的两个缓存文件。这个时候怎么处理？

经过多番查证这个问题是这样的，

参考1:http://blog.csdn.net/just4you/article/details/70233133 从Spring3.1开始，Spring提供了CommonsMultipartResolver 和StandardServletMultipartResolver处理multipart请求。

参考2:http://blog.csdn.net/hanger_liu/article/details/51970784 该文中使用CommonsMultipartResolver处理multipart请求，出现了跟我一样的问题。配置中的maxInMemorySIze 是文件上传的时候写到内存中的最大值，默认是10240字节，如果这里写大了，那么小于这个参数的文件则不会创建临时文件。

而我们使用了StandardServletMultipartResolver，以此类推在配置文件web.xml中

<multipart-config> <location>/</location> <max-file-size>20848820</max-file-size> <max-request-size>418018841</max-request-size> <file-size-threshold>1048576</file-size-threshold> </multipart-config>

由于这里的file-size-threshold是1M左右，当我的文件大于这个阀值，就会保存到临时文件upload_xxx.tmp中，而这个文件是存放在location中的。所以解决办法出来了，增大阀值必然是可以的，不过不是根本办法。根本解决办法是location配置到有权限的文件夹中。dalao支了一招，直接去掉location配置，使用默认的location就没有权限问题了。

2017.09.22凌晨 今天上班的时候碰到一个奇葩问题，关于表单提交的，以前好好的一个可以用的项目，突然在表单提交的时候后台取不到参数值了。entype采用的是默认的，如果采用multipart编码就可以拿到。由于很多地方都是这样的，没法一个个加，特别有的还是用ajax，jquery的load等方式。 终于在2点多的时候解决了。环境问题- -，全部换成现在用的javase-1.8就好了。无语，睡觉了。