Ajax による画像アップロードの概要

この記事では、Ajax でアップロードされた画像の性質に関する関連情報を主に紹介します。必要な友達はそれを参照してください

1. 画像をサーバーにアップロードします。

2. バックグラウンドは画像アドレスを HTML ページに転送し、画像の形式で表示します。

3.明後日入力フォームに画像アドレスを追加するとフォームが非表示になります。

4. フロントエンドは、js 操作を通じて画像を削除し、画像とフォームデータを削除します。

5. 画像アップロードフォームは別になります。フォーム全体でネストすることはできません。

6. 素晴らしい写真をアップロードし、写真を加工することができます。圧縮、透かしなど

7. ボタンをクリックして画像をクリックすると、画像フォームの送信がトリガーされます。

ボタンをクリック

rreee

フォームをアップロード

rreee

トリガーイベント

<p id="up_status" style="display:none">[站外图片上传中……(2)]</p>
<p id="up_btn" class="carousel-btn">
<span>添加图片</span> 
</p>
<p id="carousel-preview"></p>

バックエンドの検証と処理

<form id="imageform" class="hidden" method="post" enctype="multipart/form-data" action="{sh::U(&#39;Goods/carouselUpload&#39;)}">
<input id="carousel-photoimg" type="file" name="photoimg">
</form>

画像ファイルを削除します

$("#up_btn").click(function () {
$("#carousel-photoimg").click();
});
$('#carousel-photoimg').on('change', function(){
var status = $("#up_status");
var btn = $("#up_btn");
$("#imageform").ajaxForm({
target: '#carousel-preview', 
beforeSubmit:function(){ // 提交前，用加载的图片显示
status.show();
btn.hide();
}, 
success:function(){ // 提交后，加载的图片显示
status.hide();
btn.show();
}, 
error:function(){
status.hide();
btn.show();
} }).submit();
});

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

AJAX は post を使用して XML 形式でデータを送信し、データを受信します

Ajax は JS コードを通じてフォーム要素の値を自動的に取得します

以上がAjax による画像アップロードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。