若依框架自带上传图片
时间: 2023-09-02 22:13:06 浏览: 424
若依框架自带上传图片的过程如下:
首先,在HTML代码中,需要添加一个隐藏的input标签,并设置name属性为"studentPic",同时给input标签设置一个id属性为"pic"。在img标签中,使用th:src属性绑定"studentPic"字段,以便在图片上传成功后显示图片。
其次,在JavaScript代码中,监听input标签的change事件。当文件选择框的值发生改变时,触发change事件,执行以下操作:
创建一个FormData对象,将选择的文件添加到FormData中。
通过AJAX方式将FormData对象发送到服务器,并设置请求类型为POST。在请求的URL中,添加"common/upload"路径,以便将文件上传到服务器的指定位置。
设置cache、contentType、processData和dataType等参数,确保文件上传的正确性。
在成功回调函数中,将服务器返回的文件名设置为img标签的src属性值,并将文件名设置为隐藏input标签的值,以便在表单提交时将文件名一同提交到服务器。
最后,在页面显示的部分,使用formatter函数将服务器返回的文件名解析为img标签的src属性值,并设置宽度和高度为50px,以便在表格中正确显示学生照片。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [若依框架使用自带的方法进行图片上传](https://blog.csdn.net/weixin_45853881/article/details/109749813)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]