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);
}