jquery ajaxでファイルアップロード機能を実装（コード付き）-jsチュートリアル-php.cn

jquery ajaxでファイルアップロード機能を実装（コード付き）

亚连

リリース： 2018-05-21 15:42:47

オリジナル

1560 人が閲覧しました

この記事では、ファイルのドラッグアンドドロップアップロード機能を実装するための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" 属性で、使用されるインターフェイスもマルチファイルアップロードインターフェイスです。

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

以下は、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>

ログイン後にコピー

上記はあなたのためにまとめたものです。今後のお役に立てれば幸いです。

AJAXの使い方の詳細な分析（コード貼り付け）

インタビューの質問。 AJAX について (回答付き)

php+

ajax

クエリドロップダウンコンテンツ機能の実装

以上がjquery ajaxでファイルアップロード機能を実装（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。