动态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;
}
}

 
时间: 2024-08-04 12:56:00

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

AJaxFileUpload 文件上传&lt;pre&gt;,json字符串为空解决方法

View页面 的JS代码 其中返回值要进行序列号 dataType要大写 <script type="text/javascript"> function ajaxFileUpload(){ $.ajaxFileUpload({ url: '/FileUpload/Index', //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: 'fileName', //文件上传域的ID da

win服务器 文件上传下载出现“未指定的错误” 解决方法汇总

环境 WIN平台IIS服务器   经常出现于ASPX页面 汇总 1.权限问题 出现场景 : 基于ACCESS数据库   原因解析 : 1.首先需要排除自身问题,例如建表使用关键字,格式错误,插入数据与数据库类型不匹配等等 2.TEMP权限检查,当数据写入数据库的时候需要获取当前服务器权限只有设置了IIS的temp写入权限才能进行数据写入 解决办法 : 第一种解决方法:使用Ms Access里的“工具->数据库实用工具->压缩和修复数据库”来修复db/global.asa.如果修复后还是出错,请

html input file标签的上传文件 注意点

文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxlength=“100”> 属性解释: 属性解释: type=“file”定义文件上传框: name属性定义文件上传框的名称,要保证数据的准确采 集,必须定义一个独一无二的名称: size属性定义文件上传框的宽度,单位是单个字符宽度: maxlength属性定义最多输入的字符数. 注意: 要使得文件上载能

IE input file隐藏不能上传文件解决方法

当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案.罢了,为了和我一样笨的后来人. 问题: 上传文件时,用<input type="file" />标签,但是默认的file标签很难看,而且每个浏览器下都有很大差距. 1.一般解决办法: 我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它,比如我们创建一个a标签来替代它,隐藏file标签,单击a标签时触发file标签click弹出选择文件窗口,选择文件之后,触发file的change事件提交.

input file 美化及上传本地预览

效果: /*input file 美化及上传本地预览,兼容IE6-8,FIrefox, Chrome(需在服务端,本地无效)*/<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>input file 美化</title>    &

jQuery File Upload文件上传插件使用

jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端.官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki 特点:拖放支持:上传进度条:图像预览:可定制和可扩展的:兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.). 使用方法: 1

input实现多文件上传及图片预览

通过使用html的input标签可以实现文件上传比如 <input id="file" type="file" name="upload" multiple onchange="showch();"> 其中将type属性设为file. 添加multiple实现多文件上传入下图所示: 通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性 获得文件属性的js代码如下: <script type

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

SpringCloud+Feign环境下文件上传与form-data同时存在的解决办法

最近项目转型使用SpringCloud框架下的微服务架构,各微服务之间使用Feign进行调用.期间,发现若被调用方法涉及到文件上传且仅存在单个文件时,一切正常,代码片段如下: 1 @RequestMapping(value = "/if/****/add", method = RequestMethod.POST,consumes = MediaType.MULTIPART_FORM_DATA_VALUE) 2 JSONObject add(@RequestPart(value = &