HTMXJSとそのコンパニオン_hyperscriptJSのパワーとエレガンスにより、複数のファイルを選択してアップロード (POST) し、進行状況バーを表示して表示するコードを数行で記述できます。
<form hx-encoding="multipart/form-data"
_="on htmx:xhr:progress(loaded, total) set #bar.value to (loaded/total)*100">
<input type="file" name="fileToUpload[]" multiple
hx-post="upload.php"
hx-target="#image-src"
hx-swap="innerHTML">
<button type="button">Select</button>
<progress id="bar" value="0" max="100"></progress>
</form>
<div id="image-src"></div>
およびupload.php :
$countfiles = count($_FILES['fileToUpload']['name']);
for($i=0;$i<$countfiles;$i++){
$filename = $_FILES['fileToUpload']['name'][$i];
move_uploaded_file($_FILES['fileToUpload']['tmp_name'][$i], $filename);
echo '
<div>
<img src="'.$filename.'">
</div>
';
}
しかし、ネットワークエラー処理を追加したいと思います。HTMX がhtmx:sendErrorを起動することは知っています
が、上記のコードにそれを追加して、ネットワーク エラーが発生した場合にアラートをポップアップ表示する (またはエラーを にスワップ/表示する<div>
)方法がわかりません。