表单及上传文件一起传输，前端与后台代码实现！

表单上传数据及图片一起

<from id="inputForm">

<input name="houseName" value=""/>

<input type="file" id="f" name="f" style="display:block"/>

<button type="button" class="btn btn-sm btn-primary" οnclick="sc();"><i class="fa fa-check"></i> 保 存</button>

<from>

 

function sc(){

var animateimg = $("#f").val(); //获取上传的图片名 带//

var imgarr=animateimg.split('\\'); //分割

var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名

var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置

var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 获取文件后缀

 

var file = $('#f').get(0).files[0]; //获取上传的文件

var fileSize = file.size; //获取上传的文件大小

var maxSize = 1048576; //最大1MB

if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){

parent.layer.msg('文件类型错误,请上传图片类型');

return false;

}else if(parseInt(fileSize) >= parseInt(maxSize)){

parent.layer.msg('上传的文件不能超过1MB');

return false;

}else{

var data = new FormData($('#inputForm')[0]);

 

$.ajax({

url: "${ctx}/houses/house/save",

type: 'POST',

data: data,

dataType: 'JSON',

cache: false,

processData: false,

contentType: false,

success: function(data){

console.log(data);

},

error:function(e){

console.log(e);

}

});

}

}

后台代码

public String save(House house,HttpServletRequest request, HttpServletResponse response) throws Exception {

Map<String, Object> fieldsMap = UploadUtils4.getInstance().initFields(request);

house.setIsNewRecord(true);

if(fieldsMap.isEmpty()){

return "内部出错";

}else{

//表单内容

Map<String,String> map = (Map<String, String>) fieldsMap.get("form_fields");

//文件

List<FileItem> fileItemList = ((List<FileItem>) fieldsMap.get("file_fields"));

if(!map.isEmpty()){

if(StringUtils.isNotBlank(map.get("id"))){

house.setIsNewRecord(false);

house = houseService.get(map.get("id"));

}

house.setHousetype(map.get("housetype"));

house.setController(map.get("controller"));

house.setHousename(map.get("housename"));

house.setRatedusage(map.get("ratedusage"));

house.setHousecode(map.get("housecode"));

house.setHouseuse(map.get("houseuse"));

Principal principal = UserUtils.getPrincipal();

User user = UserUtils.get(principal.getId());

house.setModifier(user.getLoginName());

house.setStatus("1");

house.setModifydate(new Date());

houseService.save(house);

}

//图片上传

if(fileItemList!=null&&fileItemList.size()>0){

for(FileItem fileItem : fileItemList){

String path=System.getProperty("java.io.tmpdir");

String path2=request.getSession().getServletContext().getRealPath("upload");

String fileName = fileItem.getName();

String [] fileList=fileName.split("\\.");

String fileF= UUID.randomUUID().toString().replaceAll("-", "");

fileName=fileF+"."+fileList[fileList.length-1];

InputStream in = fileItem.getInputStream();

SimpleDateFormat f = new SimpleDateFormat("yyyyMMddhhmmss");

StringBuffer fileBuffer = new StringBuffer("\\" + f.format(new Date()));

String filePath = request.getSession().getServletContext().getRealPath("upload");

File file = new File(filePath + fileBuffer);

if (!file.exists()) {

file.mkdirs();

}

request.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=utf-8");

FileOutputStream os = null;

if (!fileItem.getName().isEmpty()) {

os = new FileOutputStream(file + "\\" + fileItem.getName());

byte b[] = new byte[1024];

while (in.read(b) != -1) {

os.write(b);

}

os.flush();

}

in.close();

os.close();

HousePic hp = new HousePic();

hp.setHouseOrFrameid(house.getId());

hp.setPicPath(fileName);

hp.setPicType("1");

housePicService.save(hp);

}

}

}

return renderResult(Global.TRUE, "保存库房成功");

}

编码不易,如果帮助了你,谢谢