处理 htmxjs 中的连接错误
Handle connection errors in htmxjs
凭借HTMXJS and its companion _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,但我不明白如何将它添加到我上面的代码中,以便在出现网络错误时弹出警报(或 swaps/shows 错误进入 <div>
)
你在正确的轨道上,处理这个问题的方法是挂钩到 htmx:sendError
事件。
如果您想使用超标执行此操作,您可以将以下代码添加到您的 body 标记(或发出请求的元素的任何封闭元素):
<body _="on htmx:sendError call alert('A network error occured')">
...
</body>
凭借HTMXJS and its companion _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,但我不明白如何将它添加到我上面的代码中,以便在出现网络错误时弹出警报(或 swaps/shows 错误进入 <div>
)
你在正确的轨道上,处理这个问题的方法是挂钩到 htmx:sendError
事件。
如果您想使用超标执行此操作,您可以将以下代码添加到您的 body 标记(或发出请求的元素的任何封闭元素):
<body _="on htmx:sendError call alert('A network error occured')">
...
</body>