一、注意事项:

1,该项目主要采用的是springboot+thymeleaf框架

2,代码展示的为ajax完成图片上传(如果不用ajax只需要改变相应的form表单配置即可)

二、效果实现:

1,页面效果:

2,文件夹路径下就会多了对应的图片:

三、代码实现:

1,在html文本中编辑为(采用thymeleaf框架):

提交

2,编辑js代码:

两种情况:1,有file中有值的时候提交;2,file文件中没有值的时候提交

function submitForm(pageIndex, pageSize) {

var formData = new FormData(); //将需要提交的参数封装起来

formData.append("id", $("#id").val());

var zswb = $("#file").val(); //获取file中的内容,看是否有值

if (zswb == '' || zswb.length < 1) { //没有file提交的时候走的接口

$.ajax({

url : '/editMovieWithoutFile',

type : 'post',

data : formData,

processData : false,

contentType : false,

success : function(value) {

var result = JSON.parse(value);

if (result == 'true') {

window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;

} else {

Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});

}

}

});

} else { //有file提交的时候走的接口

formData.append("file", $("#file")[0].files[0]);

$.ajax({

url : '/editMovieInfo',

type : 'post',

data : formData,

processData : false,

contentType : false,

success : function(value) {

var result = JSON.parse(value);

if (result == 'true') {

window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;

} else {

Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});

}

}

});

}

}

//图片回显:

function preview(file) {

$("#imgHidden").css("display", "none");

var prevDiv = document.getElementById('preview');

if (file.files && file.files[0]) {

var reader = new FileReader();

reader.onload = function(evt) {

　　　　　　prevDiv.innerHTML = '';

}

reader.readAsDataURL(file.files[0]);

} else {

prevDiv.innerHTML = '

}

}

3,application.properties中的配置上传的限制

#配置文件传输

spring.servlet.multipart.enabled=true

spring.servlet.multipart.file-size-threshold=0

#单个数据的大小

spring.servlet.multipart.maxFileSize=100MB

#总数据的大小

spring.servlet.multipart.maxRequestSize=100MB

4,controller(这里就不演示无file的情况,因为只是接受参数很简单):

/**

* 有file文件时

* @param movieDto 封装了需要传递过来的参数

* @param file 图片file

*/

@RequestMapping("/editMovieInfo")

@ResponseBody

public String editMovieInfo(@RequestParam("id")final int id,@RequestParam("file")MultipartFile file) {

int result = btShareService.editMovieInfo(id,file,uploadDir);

if (result > -1) {

return JSON.toJSONString("true");

} else {

return JSON.toJSONString("false");

}

}

5,service层处理:

@Transactional

@Override

public int editMovieInfo(int id, MultipartFile file,String uploadDir) {

try {

// 图片路径

String imgUrl = null;

//上传

String filename = upload(file, uploadDir, file.getOriginalFilename());

if (!EmptyUtil.isEmpty(filename)) {

imgUrl = new File(uploadDir).getName() + "/" + filename;

}

MovieInfo movie = movieInfoService.selectMovieInfoByDcpId(Integer.valueOf(movieDto.getId()));

movie .setImgUrl(imgUrl)

movieInfoService.updateMovieInfoByDcpId(movieInfo);

return 0;

} catch (Exception e) {

e.printStackTrace();

return -1;

}

}

图片上传的方法

public String upload(MultipartFile file, String path, String fileName) throws Exception {

// 生成新的文件名

String realPath = path + "/" + UUID.randomUUID().toString().replace("-", "")+fileName.substring(fileName.lastIndexOf("."));

File dest = new File(realPath);

// 判断文件父目录是否存在

if (!dest.getParentFile().exists()) {

dest.getParentFile().mkdir();

}

// 保存文件

file.transferTo(dest);

return dest.getName();

}

6,至于Dao层的操作和数据库修改这里就直接省略了….

注意：本文来自博客园-原创精华区。本站无法对本文内容的真实性、完整性、及时性、原创性提供任何保证，请您自行验证核实并承担相关的风险与后果！

CoLaBug.com遵循[CC BY-SA 4.0]分享并保持客观立场，本站不承担此类作品侵权行为的直接责任及连带责任。您有版权、意见、投诉等问题，请通过[eMail]联系我们处理，如需商业授权请联系原作者/原网站。