ホームページ > 記事 > ウェブフロントエンド > jquery ajaxを使ってファイルアップロード機能を実装する方法
jquery ajaxを使ってファイルアップロード機能を実装する方法
- jackloveオリジナル
- 2018-05-04 11:55:012330ブラウズ
多くの 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($('#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>
<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>これは複数選択アップロードです。使用されるインターフェイスは複数ファイル アップロード用のインターフェイスでもあります。
もちろん、複数回選択するだけの単一ファイルアップロードモードを使用することもできますが、インターフェイスはiyaoshiyongマルチファイルアップロードインターフェイスでもあります。
rreeeすべてのテストに合格しました! ！ ！
以下は、Ajax ドラッグ アンド ドロップ アップロード関数の実装を紹介するコード例です。具体的なコードは次のとおりです。
AJAX ドラッグ アンド ドロップ アップロード関数の実装コードは次のとおりです。 jquery ajax を使用してファイルをアップロードするコードを見てください。ファイル アップロード機能をマスターしましたか? jquery ajax 関連のコンテンツについては、php 中国語 Web サイトに注目してください。
関連する推奨事項:
画像をアップロードするための AJAX を実装する Yii+upload メソッド Yii2 は ActiveForm Ajax 送信を実装 jQuery+Ajax ユーザー名検証手順の詳細な説明以上がjquery ajaxを使ってファイルアップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。