1.xml配置
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
<!-- set the max upload size1MB 1048576 -->
<property name="maxUploadSize">
<value>52428800</value>
</property>
<property name="maxInMemorySize">
<value>2048</value>
</property>
</bean>
2.后端
@RequestMapping("/wxupload.html")
public String upload(MultipartHttpServletRequest multipartRequest,
HttpServletResponse response,ModelMap model) throws Exception{
AppointmentVo appointment = (AppointmentVo) this.getSessionObject(multipartRequest, "appointment");
if(appointment == null){
model.put("result", "0");
//return "front/success";
this.writerResponse(response, "0");
return null;
}
// String frontIdCardInfoName=(String) multipartRequest.getFileNames().next();
// String backIdCardInfoName=(String) multipartRequest.getFileNames().;
int i=0;
String path = loader.getProperty("pang.upload");
String customerId = appointment.getCustomerId();
AppointCustomer ac = new AppointCustomer();
ac.setCustomerId(customerId);
for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
String key = (String) it.next();
MultipartFile imgFile = multipartRequest.getFile(key);
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
String frontName = Utils.getFileName(imgFile.getOriginalFilename());
String frontType = Utils.getFileType(imgFile.getOriginalFilename());
String frontIdCardInfoName = frontName +"_"+ sdf.format(new Date())+frontType;
File frontTargetFile = new File(path+"/"+frontIdCardInfoName);
if(!frontTargetFile.exists()){
frontTargetFile.mkdirs();
}
imgFile.transferTo(frontTargetFile);//保存图片
if(i==0)
{
ac.setFrontIdCardInfo(path+"/"+frontIdCardInfoName);
}else
{
ac.setBackIdCardInfo(path+"/"+frontIdCardInfoName);
}
i++;
}
try{
this.appointCustomerService.update(ac);
model.put("message", "上传身份证信息成功");
this.writerResponse(response, "2");
}catch(Exception e){
model.put("message", "上传身份证信息失败");
this.writerResponse(response, "1");
e.printStackTrace();
}
return null;
//return "front/success";
}
3.修改ajaxFileUploadFile.js的源码
将源文件的createUploadForm的代码替换如下:
createUploadForm: function(id, fileElementId, data)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
if (data) {
for ( var i in data) {
jQuery(
'<input type="hidden" name="' + i + '" value="'
+ data[i] + '" />').appendTo(form);
}
}
for (var i = 0; i < fileElementId.length; i ++) {
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileElementId[i]);
jQuery(oldElement).attr('name', fileElementId[i]);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
}
4.这里可以专门写封装类,以及给file加onchange事件判断文件格式。由于时间有限,未修改
[javascript] view plaincopyprint?
var count = 1;
/**
* 生成多附件上传框
*/
function createInput(parentId){
count++;
var str = '<div name="div" ><font style="font-size:12px;">附件</font>'+
' '+ '<input type="file" contentEditable="false" id="uploads' + count + '' +
'" name="uploads'+ count +'" value="" style="width: 220px"/><input type="button" value="删除" onclick="removeInput(event)" />'+'</div>';
document.getElementById(parentId).insertAdjacentHTML("beforeEnd",str);
}
/**
* 删除多附件删除框
*/
function removeInput(evt, parentId){
var el = evt.target == null ? evt.srcElement : evt.target;
var div = el.parentNode;
var cont = document.getElementById(parentId);
if(cont.removeChild(div) == null){
return false;
}
return true;
}
5.下面是2个修改多file用的js,用于显示和删除,可以于上面的合并精简代码
[javascript] view plaincopyprint?
function addOldFile(data){
var str = '<div name="div' + data.name + '" ><a href="#" style="text-decoration:none;font-size:12px;color:red;" onclick="removeOldFile(event,' + data.id + ')">删除</a>'+
' ' + data.name +
'</div>';
document.getElementById('oldImg').innerHTML += str;
}
function removeOldFile(evt, id){
//前端隐藏域,用来确定哪些file被删除,这里需要前端有个隐藏域
$("#imgIds").val($("#imgIds").val()=="" ? id :($("#imgIds").val() + "," + id));
var el = evt.target == null ? evt.srcElement : evt.target;
var div = el.parentNode;
var cont = document.getElementById('oldImg');
if(cont.removeChild(div) == null){
return false;
}
return true;
}
6.ajax上传文件:
[javascript] view plaincopyprint?
function ajaxFileUploadImg(id){
//获取file的全部id
var uplist = $("input[name^=uploads]");
var arrId = [];
for (var i=0; i< uplist.length; i++){
if(uplist[i].value){
arrId[i] = uplist[i].id;
}
}
$.ajaxFileUpload({
url:'xxxxx',
secureuri:false,
fileElementId: arrId, //这里不在是以前的id了,要写成数组的形式哦!
dataType: 'json',
data: {
//需要传输的数据
},
success: function (data){
},
error: function(data){
}
});
}
分享到:
相关推荐
本文将详细介绍如何结合 `AjaxFileUpload` 和 `SpringMVC` 实现文件上传。 ### 1. 引入库和配置 首先,确保在项目中引入了jQuery库以及`AjaxFileUpload.js`。在JSP页面中,可以使用以下代码引入这些文件: ```...
在本文中,我们将深入探讨如何使用`ajaxFileUpload`与`Spring MVC`框架结合实现异步文件上传功能。`ajaxFileUpload`是一个基于JavaScript的插件,它允许我们使用Ajax技术进行文件上传,无需刷新页面,提高用户体验。...
在本文中,我们将深入探讨如何在Web应用中实现文件上传功能,特别关注SpringMVC框架与AJAXFileUpload库的整合。SpringMVC是Java Web开发中的一个强大框架,而AJAXFileUpload则是一个用于异步文件上传的JavaScript库...
其次,ajaxfileupload.js是前端用于异步文件上传的JavaScript库。这个库允许用户在不刷新整个页面的情况下,通过Ajax技术与服务器进行交互,上传文件。这样可以提供更好的用户体验,因为用户可以继续浏览页面,而...
本篇文章将详细讲解如何利用EasyUI的`$.ajaxFileUpload`插件与SpringMVC结合,实现无刷新的文件上传,并着重强调在实现过程中需要注意的关键点。 首先,EasyUI的`filebox`组件是一个用于文件选择和上传的控件,它...
本文将详细介绍如何利用SpringMVC与ajaxfileupload插件配合,实现无刷新的文件上传。 **一、ajaxfileupload介绍** ajaxfileupload是基于jQuery的一个插件,用于处理文件的异步上传。它弥补了jQuery本身不支持文件...
总的来说,"springmvc+ajax带有文本域进行文件上传"是一种结合了后端处理能力和前端用户体验优化的技术方案。通过Ajax和特定的插件,用户可以在不刷新页面的情况下完成文件上传,同时提交文本信息,提高了交互性和...
这篇博客"springmvc入门基础之文件上传"显然会讲解如何在Spring MVC应用中实现这一功能。我们将探讨相关的关键知识点,包括Spring MVC的MultipartFile接口、前端表单处理以及后台控制器的配置。 首先,`...
2. **AjaxFileUpload.js配置**:配置AjaxFileUpload.js,指定服务器端处理文件上传的URL,以及成功和失败的回调函数,以处理上传结果。 3. **Spring MVC Controller**:在Controller层,定义一个处理文件上传的@...
同时,ajax并不支持文件的上传,此时ajaxfileupload就应运而生了,本人,在此基础上经过改写,使其同时支持,多文件上传isMore(boolen)、序列化类型参数ContentType(Serial/json)’,并且给出了SpringMVC的文件...
同时,AjaxFileupload组件可以用来实现文件上传功能,实现异步文件上传而不刷新页面。 电子邮件的发送功能在许多应用场景中也是必要的。可以使用Java Mail API来实现邮件的发送功能,需要了解如何配置邮件服务器,...
Srping+SpringMVC+hibernate搭建,其中包含了详细的配置文件的功能注释,例如:声明式事务管理的两种实现方式(注解式与配置式),还有不同连接池的...同时包含ajaxfileupload文件上传和百度富文本编辑器Ueditor的应用
接着,我们需要在Spring MVC的配置文件(如:springMVC.xml)中配置多部分解析器(MultipartResolver),以支持文件上传。这里我们使用的是CommonsMultipartResolver,设置最大上传文件大小为10MB。 ```xml ```...
运用到的知识点主要有,spring创建管理对象(使用注解创建对象)、springMVC的使用(拦截器的使用、过滤器的使用、转发与重定向、文件的上传与下载、)、ECharts显示各个模块的图形化信息、jquery获取dom节点的值,...
文件上传: ajaxFileUpload 文本编辑:百度UEditor编辑器 三,项目结构 trunk --------------------------------------------------------- 代码库 |- sql -------------------------------------------------------...