Controller层代码
package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; /** * @author Dream_飞翔 * @email 1072876976@qq.com */ @Controller public class MessController { @RequestMapping("uploadSecond") @ResponseBody public String upLoadSecond(MultipartFile file){ System.out.println(file.getOriginalFilename()); return "1"; } }
2、运行结果：
3、代码解析：
HTML代码
<table> <tr> <td>文件上传</td> </tr> <tr> <td>文件描述：</td> <td><input type="text" name="mess" id="mess"></td> </tr> <tr> <td>上传文件</td> <td><input type="file" name="file" id="upfile"></td> </tr> <tr> <td><input type="submit" onclick="checkFile()" value="上传"/></td> </tr> </table>
与之前form表单上传文件的方式大致相同，不同点在于利用Ajax上传文件不需要使用form表单，但是在type类型为submit的<input>标签中需要添加一个单击事件，这个单击事件用于将用于处理要上传的文件
JavaScript代码
<script> // 在使用Ajax上传文件之前要先导入jQuery function checkFile() { var formData = new FormData(); formData.append('file', $('#upfile')[0].files[0]); $.ajax({ url:"/uploadSecond", type:"POST", data:formData, cache:false, processData:false, contentType:false, dataType: 'json', success:function (data) { if (data == "1") alert("上传成功"); }, error:function (data) { if (data == "0") alert("上传失败"); } }); } </script>
需要注意的是在使用Ajax上传文件之前要先导入jQuery。
function checkFile() { ... }
因为之前在<input>标签中添加了单击事件，添加的单击事件在这里进行定义做出怎样的处理
var formData = new FormData();
Ajax上传文件时传到后端的对象就是formData，也就是说我们是将这个formData对象传到了后端，所以在Ajax正式上传文件之前先声明formData对象
formData.append('file', $('#upfile')[0].files[0]);
在声明了一个formData对象以后，此时对象当中什么都没有，所以这个时候就要将想要上传的文件添加到formData对象中，append()方法中的第一个参数的意思为要添加到formData对象中的数据的类型为文件类型，第二个参数为文件对象，即$(’#file’)[0].files[0]就是我们要上传的文件。
$.ajax({ url:"/uploadSecond", type:"POST", data:formData, cache:false, processData:false, contentType:false, dataType: 'json', success:function (data) { if (data == "1") alert("上传成功"); }, error:function (data) { if (data == "0") alert("上传失败"); } }); }
- $.ajax({…});为Ajax上传文件的标准形式，url对应的值为数据接口（就是后面要被Controller层中拦截的值）
- type提交方式为post，原因与form表单提交方式一致，在此不多做赘述
- data为提交的数据，此时我们将formData对象整体进行上传
- cache的值设置为false是因为上传文件不需要缓存
- processData的值设置为false是因为data值也就是我们要上传的数据是FormData对象，不需要对数据做出处理
- dataType的意思为返回值为json格式的数据
- success：如果上传成功就执行这个function，这个方法中的参数data就是Controller层中返回的json对象，如果返回的json对象的值为1就在页面弹出提示框显示上传成功
- error：与success的思路一致，如果上传失败就执行error后面的function，如果返回的json对象的值为0则弹出上传失败的提示框
Controller层代码
@RequestMapping("uploadSecond") @ResponseBody public String upLoadSecond(MultipartFile file){ System.out.println(file.getOriginalFilename()); return "1"; }
与form表单上传文件的代码思路一致，不同点在于返回前端的json对象的内容
总结
以上便是HTML界面如何上传文件的两种方式，本文用了一个简单的案例来讲述两种上传文件方法的原理，在理解了以后再回首看这些操作其实并没有那么复杂，但是在一开始没有静下心来认真的去理解一，所以才耗费了更多的时间。在此做一个记录，以后不允许自己再犯类似的错误，遇到问题时哪怕时间再紧张也要稳下来。再次感谢读者朋友能够看到这里，如果文章中有讲解不妥的地方欢迎在评论区指出，很高兴能够一起进步！
