jQuery Ajax implementiert die Datei-Upload-Funktion (mit Code)-js-Tutorial-php.cn

jQuery Ajax implementiert die Datei-Upload-Funktion (mit Code)

亚连

Freigeben： 2018-05-21 15:42:47

Original

1565 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode von Jquery Ajax zur Implementierung der Datei-Drag-and-Drop-Upload-Funktion vorgestellt. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert

Werfen wir einen Blick auf die Ajax-Implementierung des Datei-Uploads

ohne Verwendung von Plug-Ins

1. Einzeldatei-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>

Nach dem Login kopieren

2. Mehrere Datei-Uploads

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

Nach dem Login kopieren

Der Schlüssel ist der

" Attribut. Die verwendete Schnittstelle ist auch die Schnittstelle zum Hochladen mehrerer Dateien.multiple="multiple

Natürlich können Sie auch den Einzeldatei-Upload-Modus verwenden, wählen Sie ihn einfach mehrmals aus, aber die Schnittstelle ist auch die Schnittstelle für mehrere Dateien von iyaoshiyong Upload-Schnittstelle.

Das Folgende ist ein Beispielcode, der Ihnen die Implementierung der Ajax-Drag-and-Drop-Upload-Funktion vorstellt . Der Implementierungscode lautet wie folgt:

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

Nach dem Login kopieren

Das Obige ist für mich organisiert, ich hoffe, es wird in Zukunft für alle hilfreich sein

Verwandte Artikel:

Detaillierte Analyse der Verwendung von AJAX (Code eingefügt)

Interviewfragen zu AJAX (mit Antworten)

PHP+Ajax Implementieren Sie die Abfrage-Dropdown-Inhaltsfunktion

Das obige ist der detaillierte Inhalt vonjQuery Ajax implementiert die Datei-Upload-Funktion (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!