ajax from表单上传文件

//前端代码

<div style="margin-left: 20%;margin-top: 10%;">
        <form  id="uploadFile"  >
                 <input  type="file" name="files" multiple="multiple" />  <!-- input框加上 multiple="multiple"就可以同时上传多个文件 -->
                <input type="hidden"  name="projectId"  value="1234"/> <!-- 这是你要带去后台的值 -->
        </form>
</div>

<script>
       $("input[type='file']").on("change",function(){  //input框的内容改变就ajax上传
          var formData = new FormData($( "#uploadFile" )[0]); 
          $.ajax({
              type: "POST",
              contentType: false, 
              processData: false,
              url:"/upload/uploadFile",  //url
              data:formData,
              async: false,
              error: function(request) {
                  alert("出错了");
              },
              success: function(data) {
                    
              }
         });
   })
</script>

//后台控制器接收的代码

 @ResponseBody
 @RequestMapping(value="/uploadFile",method = RequestMethod.POST)
 public String uploadFile(@RequestParam("files") MultipartFile[] files,String projectId) {
    return "null";
 }


//from表单上传文件

//前端代码

<div style="margin-left: 20%;margin-top: 10%;">
      <form action="/upload/uploadFile"  method="post" enctype="multipart/form-data">
         图片:<input type="file" name="files" accept="image/*;capture=camcorder"  multiple="multiple" /><br/><br/>
    <input type="submit" value="提交" style="margin-left:7%;color:blue;"/>
  
    <input type="hidden"  name="projectId"  value="1234"/> <!-- 这是你要带去后台的值 -->
      </form>
</div>

//后台代码

 @RequestMapping(value="/uploadFile",method = RequestMethod.POST)
 public String uploadFile(@RequestParam("files") MultipartFile[] files,String projectId) {
    return "null";
  }

表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据,enctype="multipart/form-data"是上传二进制数据;form里面的input的值以2进制的方式传过去。 form里面的input的值以2进制的方式传过去,所以request就得不到值了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值