Home > Article > Web Front-end > jquery ajax implements file upload function (with code)

jquery ajax implements file upload function (with code)

亚连Original: 2018-05-21 15:42:471467browse

This article mainly introduces the example code of jquery ajax to implement the file drag and drop upload function. The code is simple and easy to understand, very good, and has reference value. Friends in need can refer to it

Let’s look at the ajax implementation of file upload

## No plug-in is used

1. Single file upload

<!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. Multiple file upload

<!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>

This is a multi-select upload. The key is the attribute

multiple="multiple". In addition, there are many interfaces used. File upload interface.

Of course, you can also use the single file upload mode, just select multiple times, but the interface is also the iyaoshiyong multi-file upload interface.

<!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>

All tests passed! ! !

The following is an example code to introduce to you the implementation of the AJAX drag and drop upload function. The specific code is as follows;

AJAX drag and drop upload function, the implementation code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .box {
 width: 300px;
 height: 300px;
 border: 1px solid #000;
 text-align: center;
 line-height: 300px;
 font-size: 40px;
 }
 </style>
</head>
<body>
 <p class="box">+</p>
 <script>
 var box = document.querySelector(&#39;.box&#39;);
 box.ondragover = function (e) {
 e.preventDefault();
 }
 box.ondrop = function (e) {
 console.log(e.dataTransfer)
 e.preventDefault();
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && xhr.status == 200) {
  console.log(xhr.responseText)
 }
 }
 xhr.open(&#39;POST&#39;, &#39;./server.php&#39;, true);
 var formdata = new FormData();
 formdata.append(&#39;pic&#39;, e.dataTransfer.files[0]);
 formdata.append(&#39;name&#39;, &#39;luyao&#39;);
 xhr.send(formdata);
 }
 </script>
</body>
</html>
//server.php
<?php
 $rand = rand(1,1000).&#39;.jpg&#39;;
 move_uploaded_file($_FILES[&#39;pic&#39;][&#39;tmp_name&#39;], &#39;./uploads/&#39;.$rand);
 echo &#39;/uploads/&#39;.$rand;

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed analysis of how to use AJAX (code pasted)

Interview questions about AJAX (attached There is an answer)

php ajaxImplement the query drop-down content function

The above is the detailed content of jquery ajax implements file upload function (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of function eventsNext article：Summary of function events

See more

jquery ajax implements file upload function (with code)

Related articles