jquery ajaxを使ってファイルアップロード機能を実装する方法-jsチュートリアル-php.cn

jquery ajaxを使ってファイルアップロード機能を実装する方法

jacklove

リリース： 2018-05-04 11:55:01

オリジナル

2442 人が閲覧しました

多くの Web サイトを観察すると、多くの Web サイトにファイルのドラッグアンドドロップ機能があることがわかります。この記事では、jquery ajax を使用してファイルのドラッグアンドドロップアップロード機能を実装する方法について詳しく説明します。

1. 単一のファイルのアップロード

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

ログイン後にコピー

2 . 複数ファイルのアップロード

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

ログイン後にコピー

これは複数選択アップロードです。使用されるインターフェイスは複数ファイルアップロード用のインターフェイスでもあります。

もちろん、複数回選択するだけの単一ファイルアップロードモードを使用することもできますが、インターフェイスはiyaoshiyongマルチファイルアップロードインターフェイスでもあります。

rreee

すべてのテストに合格しました! ！！

以下は、Ajax ドラッグアンドドロップアップロード関数の実装を紹介するコード例です。具体的なコードは次のとおりです。

AJAX ドラッグアンドドロップアップロード関数の実装コードは次のとおりです。 jquery ajax を使用してファイルをアップロードするコードを見てください。ファイルアップロード機能をマスターしましたか? jquery ajax 関連のコンテンツについては、php 中国語 Web サイトに注目してください。