jquery ajax实现文件上传功能实例代码

2024-09-01 08:26:53

字体：大中小

来源：转载

供稿：网友

下面看下ajax实现文件上传

没有使用插件

一、单文件上传

<!DOCTYPE html> <html> <head lang="en">  <meta charset="UTF-8">  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>  <title></title> </head> <body> <form id="uploadForm" enctype="multipart/form-data">  文件:<input id="file" type="file" name="file"/> </form> <button id="upload">上传文件</button> </body> <script type="text/javascript">  $(function () {  $("#upload").click(function () {   var formData = new FormData($('#uploadForm')[0]);   $.ajax({   type: 'post',   url: "http://192.168.1.101:8080/springbootdemo/file/upload",   data: formData,   cache: false,   processData: false,   contentType: false,   }).success(function (data) {   alert(data);   }).error(function () {   alert("上传失败");   });  });  }); </script> </html>

二、多文件上传

<!DOCTYPE html> <html> <head lang="en">  <meta charset="UTF-8">  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>  <title></title> </head> <body> <form id="uploadForm" enctype="multipart/form-data">  文件:<input type="file" name="file" multiple="multiple"/><br> </form> <button id="upload">上传文件</button> </body> <script type="text/javascript">  $(function () {  $("#upload").click(function () {   var formData = new FormData($('#uploadForm')[0]);   $.ajax({   type: 'post',   url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles",   data: formData,   cache: false,   processData: false,   contentType: false,   }).success(function (data) {   alert(data);   }).error(function () {   alert("上传失败");   });  });  }); </script> </html>

这个是多选上传，关键是multiple="multiple"这个属性，另外使用的接口也是多文件上传的接口。

当然也可以使用单文件上传的模式，多次选择就可以了，只不过接口也是iyaoshiyong多文件上传的接口。

<!DOCTYPE html> <html> <head lang="en">  <meta charset="UTF-8">  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>  <title></title> </head> <body> <form id="uploadForm" enctype="multipart/form-data">  文件:<input type="file" name="file"/><br>  文件:<input type="file" name="file"/><br>  文件:<input type="file" name="file"/><br> </form> <button id="upload">上传文件</button> </body> <script type="text/javascript">  $(function () {  $("#upload").click(function () {   var formData = new FormData($('#uploadForm')[0]);   $.ajax({   type: 'post',   url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles",   data: formData,   cache: false,   processData: false,   contentType: false,   }).success(function (data) {   alert(data);   }).error(function () {   alert("上传失败");   });  });  }); </script> </html>

上一篇：Ajax 动态载入html页面后不能执行其中的js快速解决方法

下一篇：解决ajax传过来的值后台接收不到的问题