집 >웹 프론트엔드 >JS 튜토리얼 >jquery ajax는 파일 업로드 기능을 구현합니다(코드 포함).

jquery ajax는 파일 업로드 기능을 구현합니다(코드 포함).

亚连원래의: 2018-05-21 15:42:471568검색

이 글에서는 파일 드래그 앤 드롭 업로드 기능을 구현하기 위한 jquery ajax의 예제 코드를 주로 소개합니다. 코드가 간단하고 이해하기 쉽고, 도움이 필요한 친구들이 참고할 수 있을 만큼 좋습니다. 파일 업로드의 Ajax 구현을 살펴보세요

플러그인이 사용되지 않습니다

1. 단일 파일 업로드

<!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($(&#39;#uploadForm&#39;)[0]); 
  $.ajax({ 
  type: &#39;post&#39;, 
  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>

2. 다중 파일 업로드

<!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($(&#39;#uploadForm&#39;)[0]); 
  $.ajax({ 
  type: &#39;post&#39;, 
  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다음은 ajax 드래그 앤 드롭 업로드 기능의 구현을 소개하는 예제입니다.

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 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($(&#39;#uploadForm&#39;)[0]); 
  $.ajax({ 
  type: &#39;post&#39;, 
  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>

위 내용은 여러분에게 도움이 되길 바랍니다.

jquery ajax는 파일 업로드 기능을 구현합니다(코드 포함).

관련 기사