使用FormData进行文件上传

最新推荐文章于 2024-08-12 09:54:37 发布

浅夏初雨

最新推荐文章于 2024-08-12 09:54:37 发布

阅读量778

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/dsj15831653282/article/details/83625011

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

不想写前端的我，发现两年来逃脱不了写前端的命运，作为一个后台全面发展还是必要的。最近小编碰到了一个form表单提交文件，后台无法接收的问题。

 <form action="/reportClueController/saveClueCheck"  onsubmit="return toVaild1()" method="post" id="myform" >

form表单提交大家应该很熟悉了，只需要定义name值，就能被后台实体接收，传统的方式是 submit直接提交后刷新页面，但是我们经常会提交后作出一些判断是否提交成功，所以我们大多是用ajax方式进行表单提交

           var params = $('#myform').serialize();
			var url = getBaseURL() + "/blackNameController/updateBlackName";
			$.ajax({
				type : "post",
				url : url,
				data : params,
				dataType : "json",
				success : function(data) {
					if (data.msg == "success") {
						$.alert("编辑成功!");
						pageModelConfig(0);
					} else {
						$.alert("编辑失败!");
					}
				}

这个时候问题来了，如果表单里面包含文件上传 ,这个时候文件是无法传到后台的，因为文件无法进行序列化。百度一番，发现使用FormData可以进行文件提交。
FormData采用key,value的方式进行赋值的方式

<div>
          <input type="file" name="FileUpload" id="FileUpload">
          <a class="layui-btn layui-btn-mini" >上传图片</a>
		  <button class="button-style" id="btn_uploadimg" type="submit">保存</button>
      </div>

    var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
    //TODO 判断文件类型
    var formFile = new FormData();
    if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
    }else{
        formFile.append("action", "UploadVMKImagePath");
        formFile.append("uploadFile", fileObj); //加入文件对象
    }
     formFile.append("taskId",taskId);
   $.ajax({
        url: url,
        type: 'POST',
        cache: false,
        data: formFile,
        processData: false,
        contentType: false,
        success : function(data) {
           if (data.code == "0000") {
                alert("保存成功!");
                location.href=getBaseURL() + "/feedbackController/index";
            } else {
                alert("保存失败!");
            }
       },
    })

formData需要将参数一个一个的赋值，如果页面数据特别多的话，也是很让人头痛的事情。
总结到这里了，在此推荐博客一篇：
https://blog.csdn.net/qq_32447301/article/details/78907313