How to use jquery ajax to implement file upload function-JS Tutorial-php.cn

How to use jquery ajax to implement file upload function

jacklove

Release： 2018-05-04 11:55:01

Original

2406 people have browsed it

When observing many websites, you will find that many websites have file drag and drop functions, so this article details how to use jquery ajax to implement file drag and drop upload functions:

1. Single File upload

<!DOCTYPE html> 
<html> 
<head> 
 <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>

Copy after login

2. Multiple file upload

<!DOCTYPE html> 
<html> 
<head> 
 <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>

Copy after login

This is a multi-select upload. The key is the attribute multiple="multiple". The interface used is also the interface for multi-file upload.

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

Copy after login

All tests passed! ! !

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

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

<!DOCTYPE html>
<html>
<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>+</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;

Copy after login

Watch the code for uploading files using jquery ajax, and see if you have mastered the file upload function. For more jquery ajax related content, please pay attention to the php Chinese website to watch.

Related recommendations:

Yii upload method to implement AJAX to upload images

Yii2 implements ActiveForm ajax submission

Detailed explanation of jQuery Ajax verification username steps

The above is the detailed content of How to use jquery ajax to implement file upload function. For more information, please follow other related articles on the PHP Chinese website!