2

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>)方法がわかりません。

4

1 に答える 1