java 异步上传一张图片_springmvc+ajax异步上传图片

1、javaweb传统的上传图片方式就是通过form表单提交

2、现在想要实现：点击文件表单的"浏览"按鈕后，文件异步上传，然后返回文件的路径，页面实时刷新显示刚才上传的图片。

2.1、新建一个springboot项目picDemo

pom.xml

org.springframework.boot

spring-boot-starter-thymeleaf

org.springframework.boot

spring-boot-starter-web

org.springframework.boot

spring-boot-starter-test

test

application.properties

server.port=8090

server.servlet.context-path=/

2.2、要实现图片异步上传，可以使用jquery.form.js插件。

save.html

标题

.hidden{display:none;

}

电影名称：电影图片：

functionfileUpload() {varoption={

type:'POST',

url:'/film/uploadPic',

dataType:'json',

data:{

fileName :'file'},

success:function(data){//把json串转换成json对象

//var jsonObj = $.parseJSON(data);

//alert(data);

//返回服务器图片路径，把图片路径设置给img标签

$("#imgSrc").attr("src",data.fullPath);//显示图片

$("#imgSrc").removeClass("hidden");//数据库保存相对路径

$("#imageUrl").val(data.relativePath);//alert($("#imageUrl").val());

}

};

$("#form").ajaxSubmit(option);

}