Ajax图片上传后的回显问题

Ajax图片上传后的回显问题

Ajax图片上传后的回显问题

• • 问题描述
  • 出错原因
  • 解决方法
  • 补充几点学到的前端知识
  • • 0. 前端知识博大精深
    • 1. name和id
    • 2. js 获取到图片
    • 3. ajax上传图片提交的表单里要加上```enctype="multipart/form-data"```，method要用```POST```等，还有需要用到```new FormData(form)```
    • 4. $(document).ready

问题描述

在很多时候我们都需要完成上传并保存到服务器的操作，同时我们也希望上传图片后能马上显示出自己刚上传的文件，如下图

出错原因

一开始的思路是利用ajax把图片存到项目里的某个目录下，然后返回路径，利用js进行显示，但是由于springboot部署的web项目是把项目打成war包部署到tomcat，而我们后台接收图片保存的路径还是在本地（没有到tomcat里），所以我一开始想利用ajax获取的返回值做路径去访问刚上传的图片的思路是错误的，写过bug的人都知道，一个bug解决不了困惑人好几天是很烦心的。后来我又不断尝试（尝试iframe、ajax等方法），终于意识到了本质的错误，想到了其实本地上传本地应该就有回显的方法，不需要利用ajax去获得存储图片的路径进行回显，终于，问题得到了解决。

解决方法

html

<form  th:id="'imageForm'+${book.book_id}" action="/postCommentImage" method="POST" enctype="multipart/form-data"><!--进行显示图片的img--><img src