动态input file多文件上传到后台没反应的解决方法！！！

标签：

其实我也不太清除具体是什么原因，但是后面就可以了！！！

我用的是springMVC 自带的文件上传

1、首先肯定是要有springMVC上传文件的相关配置！

2、前端

　　这是动态input file上传到后台没反应的写法（页面上写死的上传到后台是可以的）

　　这段代码是写在table>>下的form表单里的

　　<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="删除附件" onclick="deleteInput()">
<span id="upload"></span>
改为
吧上面那段代码换种方式，先写<form>，在写<table>

<div class="modal-content" style="width: 600px">
<form action="/ecp/mulFileUpload/testFu" method="POST" enctype="multipart/form-data">
<input type="hidden" name="topicId" value="${topicId}">
<table class="table table-bordered">
<tr>
<th>活动参与人数:</th>
<td><input type="text" name="peopleCount"/></td>
</tr>
<tr>
<th>活动人均经费:</th>
<td><input type="text" name="perPrice"/></td>
</tr>
<tr>
<th>上传图片/附件:</th>
<td>
<input type="file" name="myfiles"/>
<span id="upload"></span>
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="添加图片/附件" onclick="addInput()">
<input type="button" name="button" value="删除图片/附件" onclick="deleteInput()">
</td>
<%--<td><button class="btn btn-success" onclick="formSubmit()"></button></td>--%>
<td><input type="submit" class="btn btn-success"/></td>
</tr>

</table>
</form>
</div>

这样就可以了，说实话我也不知道为什么（！！！！）

3、js代码

var attachName = "myfiles";

function addInput(){
createInput(attachName);
}
function deleteInput(){
removeInput();
}

function createInput(name){
var aElement=document.createElement("input");
aElement.name=name;
aElement.type="file";

var spanElement = document.getElementById("upload");
/* if(document.getElementById("upload").insertBefore(aElement,spanElement.nextSibling) == null){
return false;
}*/
if(document.getElementById("upload").appendChild(aElement) == null){
return false;
}
return true;
}

function removeInput(){
var aElement = document.getElementById("upload");
if(aElement.removeChild(aElement.lastChild) == null){
return false;
}

return true;
}

 4、Java代码

package com.ibm.db.controller;

import com.ibm.db.service.IMulFileUploadService;
import com.ibm.db.service.ITopicService;
import org.apache.commons.io.FileUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

/**
* Created by zml on 16-4-11.
*/
@RestController
@RequestMapping(value = "/ecp/mulFileUpload")
public class mulFileLoadifyController {

@Resource(name = IMulFileUploadService.SERVICE_NAME)
private IMulFileUploadService topicService;

@RequestMapping(value = "/testFu")
public String addUser( @RequestParam MultipartFile[] myfiles, HttpServletRequest request) throws IOException {

Date dataTime = new Date();
//保存该活动贴的相关信息,材料提交状态改为1
topicService.insertIno(topicId,1,peopleCount,perPrice,dataTime);

//如果只是上传一个文件，则只需要MultipartFile类型接收文件即可，而且无需显式指定@RequestParam注解
//如果想上传多个文件，那么这里就要用MultipartFile[]类型来接收文件，并且还要指定@RequestParam注解
//并且上传多个文件时，前台表单中的所有<input type="file"/>的name都应该是myfiles，否则参数里的myfiles无法获取到所有上传的文件
//判断file数组不能为空并且长度大于0
if(myfiles!=null&&myfiles.length>0){

//循环获取file数组中得文件
for(int i =0;i<myfiles.length;i++){
MultipartFile file = myfiles[i];
String uploadContentType =file.getContentType();
String expandedName ="";
if (uploadContentType.equals("imagepeg")
|| uploadContentType.equals("image/jpeg")) {
// IE6上传jpg图片的headimageContentType是imagepeg，而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
} else if (uploadContentType.equals("image/png")
|| uploadContentType.equals("image/x-png")) {
// IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
} else if (uploadContentType.equals("image/gif")) {
expandedName = ".gif";
} else if (uploadContentType.equals("image/bmp")) {
expandedName = ".bmp";
}

//保存文件
saveFile(file,expandedName,request);
}
}
return "uploadSuccess";
//return "redirect:/list.html";
}

/***
* 保存文件
* @param file
* @return
*/
private boolean saveFile(MultipartFile file,String expandedName,HttpServletRequest request) {
DateFormat df = new SimpleDateFormat(TopicController.DEFAULT_SUB_FOLDER_FORMAT_AUTO);
String fileName = df.format(new Date());
// 判断文件是否为空
if (!file.isEmpty()) {
try {
String filePath = "";
// 文件保存路径
if(expandedName!=null&&!expandedName.equals("")){
//如果是图片
filePath = request.getSession().getServletContext().getRealPath("/") + "upload/img/"
+ fileName+expandedName;
}else{
String OriginalFilename = file.getOriginalFilename();
String suffix=OriginalFilename.substring(OriginalFilename.lastIndexOf(".")+1);
filePath = request.getSession().getServletContext().getRealPath("/") + "upload/file/"
+ fileName+"."+suffix;
}

File targetFile = new File(filePath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}

// 转存文件
file.transferTo(targetFile);
return true;
} catch (Exception e) {
e.printStackTrace();
}
}
return false;
}
}

动态input file多文件上传到后台没反应的解决方法！！！

标签：

原文地址：http://www.cnblogs.com/zml-java/p/5384521.html