通过formdata ajax上传图片 以及后台接收formdata数据 mvc

最近一直研究如何通过ajax上传图片看了好对用formdata来实现 但是关于springmvc后台如何接收formdata的数据一直没有介绍 今天把后台接收数据也写下来了 。

有点不完整 但是是能够实现的 相信有能看懂的 大家见谅 带有颜色的标记注意一下

<form class="inpform" id="uploadForm" enctype="multipart/form-data">
<div class="f-inp">
<div>&#12288;<i>诊所名称：</i>
<input type="text" name="name" id="name" >
</div>
<div>&#12288;<i>诊所地址：</i>
<input type="text" name="addrInfo" id="addrInfo" >
</div>

<h4>Logo</h4>
<input type="file" id="file" name="file" />
</div>
</form>
<input type="button" value="提交" onclick="add();">

js如下

function add(){
var formData = new FormData($("#uploadForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
$.ajax({
async: false,//要求同步 不是不需看你的需求
url : "app/gexingSet.htmls",
type : 'POST',
data : formData,
processData : false,//必须false才会避开jQuery对 formdata 的默认处理
contentType : false,//必须false才会自动加上正确的Content-Type
success : function(result) {
if(result==1){
forward=true;
}else{

$(".myModal-click").trigger("click");
forward=false;
}
},
error : function(result) {
$(".myModal-click").trigger("click");
forward=false;
}
});

}

spring mvc 处

@Controller
@RequestMapping("/app")
public class ClinicController {

@ResponseBody
@RequestMapping("gexingSet.htmls")
public int gexingSet1(
@RequestParam(value = "file",required = false)MultipartFile file,
String name,String addrInfo,HttpServletRequest request) { //name和addrinfo是表单提交的数据 因为文件上传有可能带有其他参数 但是名字要与表单里的名字一样
String fileName = file.getOriginalFilename(); //获取文件名
if (!file.isEmpty()) {
String path = “”;//写你的路径 这里不写了
File targetFile1 = new File(path,fileName);
OutputStream out;

InputStream in;

try {
byte[] buf = file.getBytes();//文件二进制

while ((length = in.read(buf)) != -1) { out.write(buf,length); } out.flush(); in.close(); out.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!