ホームページ > 記事 > ウェブフロントエンド > jquery ajaxでファイルアップロード機能を実装（コード付き）
jquery ajaxでファイルアップロード機能を実装（コード付き）
- 亚连オリジナル
- 2018-05-21 15:42:471535ブラウズ
この記事では、ファイルのドラッグアンドドロップアップロード機能を実装するための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($('#uploadForm')[0]);
$.ajax({
type: 'post',
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($('#uploadForm')[0]);
$.ajax({
type: 'post',
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($('#uploadForm')[0]);
$.ajax({
type: 'post',
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 について (回答付き)
ajax以上がjquery ajaxでファイルアップロード機能を実装（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。